14.0.0 • Published 5 months ago

@material/select v14.0.0

Weekly downloads
52,631
License
MIT
Repository
github
Last release
5 months ago

Select Menus

MDC Select provides Material Design single-option select menus. It functions as a wrapper around the browser's native <select> element. It is fully accessible, and fully RTL-aware.

Design & API Documentation

Installation

npm install @material/select

Usage

Using the full-fidelity JS component

<div class="mdc-select">
  <select class="mdc-select__native-control">
    <option value="" disabled selected></option>
    <option value="grains">
      Bread, Cereal, Rice, and Pasta
    </option>
    <option value="vegetables">
      Vegetables
    </option>
    <option value="fruit">
      Fruit
    </option>
  </select>
  <label class="mdc-floating-label">Pick a Food Group</label>
  <div class="mdc-line-ripple"></div>
</div>

Then with 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 for more information on how to import JavaScript.

Select with pre-selected option

When dealing with the select component that has pre-selected values, you'll want to ensure that you render mdc-floating-label with the mdc-floating-label--float-above modifier class and the selected option with the selected attribute. This will ensure that the label moves out of the way of the select's value and prevents a Flash Of Unstyled Content (FOUC).

<div class="mdc-select">
  <select class="mdc-select__native-control">
    <option value="vegetables">
      Vegetables
    </option>
    <option value="fruit">
      Fruit
    </option>
    <option value="dairy" selected>
      Milk, Yogurt, and Cheese
    </option>
  </select>
  <label class="mdc-floating-label mdc-floating-label--float-above">Pick a Food Group</label>
  <div class="mdc-line-ripple"></div>
</div>

Select with floating label as the placeholder

By default, <select> elements will select their first enabled option. In order to initially display a placeholder instead, add an initial <option> element with the disabled and selected attributes set, and with value set to "".

<option value="" disabled selected></option>

Disabled select

Add the mdc-select--disabled class to the mdc-select element and the disabled attribute to the <select> element.

<div class="mdc-select mdc-select--disabled">
  <select class="mdc-select__native-control" disabled>
    <option value="grains">
      Bread, Cereal, Rice, and Pasta
    </option>
    <option value="vegetables">
      Vegetables
    </option>
    <option value="fruit">
      Fruit
    </option>
  </select>
  <label class="mdc-floating-label">Pick a Food Group</label>
  <div class="mdc-line-ripple"></div>
</div>

Disabled options

Since MDC Select uses native <select> and <option> elements, simply add the disabled attribute to individual options to disable them.

<div class="mdc-select">
  <select class="mdc-select__native-control">
    <option value="grains">
      Bread, Cereal, Rice, and Pasta
    </option>
    <option value="vegetables" disabled>
      Vegetables
    </option>
    <option value="fruit">
      Fruit
    </option>
  </select>
  <label class="mdc-floating-label">Pick a Food Group</label>
  <div class="mdc-line-ripple"></div>
</div>

CSS Classes

ClassDescription
mdc-selectMandatory.
mdc-select--boxStyles the select as a box select.

Sass Mixins

To customize the colors of any part of the select, use the following mixins. We recommend you use these mixins within CSS selectors like .foo-select to apply styling.

MixinDescription
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 label color please see the floating label readme.

MDC Select Component API

The MDC Select component API is modeled after a subset of the HTMLSelectElement functionality, and is outlined below.

Properties

Property NameTypeDescription
valuestringThe value of the currently selected option.
selectedIndexnumberThe index of the currently selected option. Set to -1 if no option is currently selected. Changing this property will update the select element.
disabledbooleanWhether 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.

MDCSelectAdapter

Method SignatureDescription
addClass(className: string) => voidAdds a class to the root element.
removeClass(className: string) => voidRemoves a class from the root element.
floatLabel(value: boolean) => voidFloats or defloats label.
activateBottomLine() => voidActivates the bottom line component.
deactivateBottomLine() => voidDeactivates the bottom line component.
setDisabled(disabled: boolean) => voidSets the disabled property of the <select> element.
registerInteractionHandler(type: string, handler: EventListener) => voidAdds an event listener handler for event type type on the <select> element.
deregisterInteractionHandler(type: string, handler: EventListener) => voidRemoves an event listener handler for event type type on the <select> element.
getSelectedIndex() => numberReturns the selected index of the <select> element.
setSelectedIndex(index: number) => voidSets the selected index of the <select> element.
getValue() => stringReturns the value selected on the <select> element.
setValue(value: string) => voidSets the value of the <select> element.

MDCSelectFoundation

Method SignatureDescription
setValue(value: string) => voidSets the value of the component.
setDisabled(disabled: boolean) => voidAdds/removes disabled class, and sets disabled attribute on the component.
setSelectedIndex(selectedIndex: number) => voidSets the selected index of the component.
@material/data-table@material/mwc-select@enbock/time-tracker@zentek/selectmdwrapper@beezydev/selecttest-component-library-stencilmaterial-components-web@everything-registry/sub-chunk-584preact-material-componentspreact-material-components-mgrmollitiaanimimyg-select@dev.mohe/mwc-select@dolphin-kiss/material-wc-select@detachhead/smui-selectbw-material@types/material__selectaurelia-material-uiaurelia-mdc-ui@arterial/select@batchforce/core@aurelia-mdc-web/select@aurelia2-mdc-web/select@authentic/mwc-select@bitchin/react-material-web@bringhub/fabric.js@angular/material@angular/material-experimentalvue-material-design-componentsvoyager-components@gmvdev/materialscomponents-library-v1closure-react-selectmaterial-react-jsmaterial-imbamaterial-toolboxmdc-react-gumballreact-material-web-componentsreact-mdcquisquamdistinctiotest-nt-playground@emuanalytics/flow-rdfselective-edittest-rsmdcsvelte-arcadia@shortcm/react-select@smui/select@robertkern/vue-materialuui-components@rmwc/selectexplicaboquia@listo-paye/sdk-ui@inovex.de/elements@morioh/material@o-rango/orango-demo-tools@o-rango/orango-material-design@mcwv/select@material/react-select@materialr/select@materials-elements/core@materials-elements/site@materials-ui/core@materials-ui/site@mhamrah/svelte-material-ui@mdc-stencil/selectgesdisc-components@niftykit/components@niftykit/widgets@infinitebrahmanuniverse/nolb-_mateember-cli-mdc-selectember-material-componentseasyfyv3-presentationdeps@openremote/or-input@pie-framework/pie-player-components@pmwcs/select@preact-material-components/select@pitaya-components/selectidm-reservation-search-results-details-lib
14.0.0

2 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

3 years ago

10.0.0

3 years ago

9.0.0

3 years ago

8.0.0

3 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

3.2.0

5 years ago

4.0.0-canary.1

5 years ago

4.0.0-canary.0

5 years ago

4.0.0-alpha.0

5 years ago

3.1.0

5 years ago

3.1.0-alpha.0

5 years ago

3.0.0

5 years ago

3.0.0-alpha.1

5 years ago

3.0.0-alpha.0

5 years ago

2.3.1

5 years ago

2.3.0

5 years ago

2.2.0

5 years ago

3.0.0-0

5 years ago

2.1.1

5 years ago

2.0.0

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-1

5 years ago

1.0.0-0

5 years ago

0.44.1

5 years ago

0.44.0

5 years ago

0.43.0

5 years ago

0.42.1

5 years ago

0.42.0

5 years ago

0.41.0

5 years ago

0.40.1

6 years ago

0.40.0

6 years ago

0.39.3

6 years ago

0.39.2

6 years ago

0.39.1

6 years ago

0.39.0

6 years ago

0.39.0-0

6 years ago

0.38.1

6 years ago

0.38.0

6 years ago

0.37.1

6 years ago

0.37.0

6 years ago

0.36.0

6 years ago

0.36.0-0

6 years ago

0.35.2

6 years ago

0.35.1

6 years ago

0.35.0

6 years ago

0.34.1

6 years ago

0.34.0

6 years ago

0.33.0

6 years ago

0.32.0

6 years ago

0.31.0

6 years ago

0.30.0

6 years ago

0.29.0

6 years ago

0.28.0

6 years ago

0.27.0

6 years ago

0.26.0

6 years ago

0.25.0

6 years ago

0.24.0

6 years ago

0.23.0

7 years ago

0.3.18

7 years ago

0.3.17

7 years ago

0.3.16

7 years ago

0.3.15

7 years ago

0.3.14

7 years ago

0.3.13

7 years ago

0.3.12

7 years ago

0.3.11

7 years ago

0.3.10

7 years ago

0.3.9

7 years ago

0.3.8

7 years ago

0.3.7

7 years ago

0.3.6

7 years ago

0.3.5

7 years ago

0.3.4

7 years ago

0.3.3

7 years ago

0.3.2

7 years ago

0.3.1

7 years ago

0.3.0

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago