# Select Menus MDC Select provides Material Design single-option select menus. It functions as a wrapper around the browser's native `
``` ### Styles ```scss @import "../select/mdc-select"; ``` ### JavaScript Instantiation ```js const select = new mdc.select.MDCSelect(document.querySelector('.mdc-select')); select.listen('change', () => { alert(`Selected option at index ${select.selectedIndex} with value "${select.value}"`); }); ``` See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript. ## Variants ### Select Box The Select Box variant uses the same markup as the standard variant, with the addition of the `mdc-select--box` modifier class on the root element. ```html
``` ### Additional Information #### Select with pre-selected option When dealing with a select component that has a pre-selected value, include the `mdc-floating-label--float-above` modifier class on the `mdc-floating-label` element, and add the `selected` attribute to the selected option. This will ensure that the label moves out of the way of the select's value and prevents a Flash Of Unstyled Content (**FOUC**). ```html
``` #### Using the floating label as the placeholder By default, `` element. ```html
``` #### Disabled options Since MDC Select uses native `
``` ## Style Customization #### CSS Classes | Class | Description | | --- | --- | | `mdc-select` | Mandatory. | | `mdc-select--box` | Styles the select as a box select. | | `mdc-select--disabled` | Styles the select as disabled. This class should be applied to the root element when the `disabled` attribute is applied to the `` element. | ### Sass Mixins Mixins should be included in the context of a custom class applied to the component's root element, e.g. `.my-select`. Mixin | Description --- | --- `mdc-select-ink-color($color)` | Customizes the color of the selected item displayed in the select. `mdc-select-container-fill-color($color)` | Customizes the background color of the select. `mdc-select-label-color($color)` | Customizes the label color of the select in the unfocused state. `mdc-select-focused-label-color($color)` | Customizes the label color of the select when focused. `mdc-select-bottom-line-color($color)` | Customizes the color of the default bottom line of the select. `mdc-select-focused-bottom-line-color($color)` | Customizes the color of the bottom line of the select when focused. `mdc-select-hover-bottom-line-color($color)` | Customizes the color of the bottom line when select is hovered. > NOTE: To further customize the floating label, please see the [floating label documentation](./../mdc-floating-label/README.md). ## `MDCSelect` API The `MDCSelect` component API is modeled after a subset of the `HTMLSelectElement` functionality. | Property | Type | Description | | --- | --- | --- | | `value` | `string` | The `value` of the currently selected option. | | `selectedIndex` | `number` | The index of the currently selected option. Set to -1 if no option is currently selected. Changing this property will update the select element. | | `disabled` | `boolean` | Whether or not the component is disabled. Settings this sets the disabled state on the component. | ### Events The MDC Select JS component emits a `change` event when the selected option changes as the result of a user action. ## Usage within Web Frameworks If you are using a JavaScript framework, such as React or Angular, you can create a Select for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md). ### `MDCSelectAdapter` | Method Signature | Description | | --- | --- | | `addClass(className: string) => void` | Adds a class to the root element. | | `removeClass(className: string) => void` | Removes a class from the root element. | | `floatLabel(value: boolean) => void` | Floats or defloats label. | | `activateBottomLine() => void` | Activates the bottom line component. | | `deactivateBottomLine() => void` | Deactivates the bottom line component. | | `setDisabled(disabled: boolean) => void` | Sets the `disabled` property of the `` element. | | `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` on the `` element. | | `setSelectedIndex(index: number) => void` | Sets the selected index of the `` element. | | `setValue(value: string) => void` | Sets the value of the `