To help you get started, we've collected the most common ways that @rmwc/select is being used within popular public projects.

fluidtrends / chunky / web / lib / components / Navigation.js View on Github

{
          raised: true,
          theme: 'secondary-bg text-primary-on-secondary',
          onClick: this._onMenuItem(item),
          style: _extends({
            color: this.props.theme.navigationTextButton,
            marginRight: '0px'
          }, actionButtonAdditionalStyle)
        },
        '' + translatedTitle
      );
      var languages = this.props.theme.languages;

      var dropdownAdditionalStyle = this.props.theme.dropdownStyle ? this.props.theme.dropdownStyle : {};

      var MenuDropdown = _react2.default.createElement(_select.Select, {
        label: item.title,
        options: languages,
        onChange: function onChange(evt) {
          return _this3.changeLanguage(evt.target.value);
        },
        value: this.state.selectedLanguage,
        style: _extends({
          color: this.props.theme.navigationTextButton
        }, dropdownAdditionalStyle)
      });
      return (0, _responsive.renderResponsive)('menuItem' + index++, _react2.default.createElement('div', null), item.alwaysShowIcon ? MenuIcon : item.action ? MenuActionButton : item.id === 'translation' ? MenuDropdown : MenuButton);
    }
  }, {

View more ways to use @rmwc/select

Select Menus

Menus display a list of choices on a transient sheet of material.

• Module @rmwc/select
• Import styles:
  • Using CSS Loader
    • import '@rmwc/select/styles';
  • Or include stylesheets
    • '@rmwc/select/select.css'
    • '@material/select/dist/mdc.select.css'
    • '@material/floating-label/dist/mdc.floating-label.css'
    • '@material/notched-outline/dist/mdc.notched-outline.css'
    • '@material/line-ripple/dist/mdc.line-ripple.css'
    • '@material/list/dist/mdc.list.css'
    • '@material/menu/dist/mdc.menu.css'
    • '@material/menu-surface/dist/mdc.menu-surface.css'
    • '@material/ripple/dist/mdc.ripple.css'
• MDC Docs: https://material.io/develop/web/components/input-controls/select-menus/

Select Styles

Selects come in three different styles: standard, outlined, and enhanced.

<select label="Standard">

</select>

<select label="Enhanced">

</select>

<select label="With Icon">

Select v14 from material-components-web has no width by default. The RMWC team has taken an active choice of giving Select a default width of 200px to stay true to the RMWC principle of introducing no breaking changes.

</select>

Validation

<select required="" label="Required">

</select>

<select disabled="" label="Disabled">

Controlled / Uncontrolled

The Select component has the same behaviors as a native HTML select and be both controlled and uncontrolled.

function Example() {
  const [value, setValue] = React.useState('Cookies');
  return (
    </select> setValue(evt.currentTarget.value)}
    /&gt;
  );
}

<select label="Uncontrolled"> console.log(evt.currentTarget.value)}
/&gt;

Data Driven Selects

To fit common use cases, RMWC Select provides a data driven method for rendering select menus. There are multiple formats you can pass data in, use the one that best fits your requirements. To make your label not float by default and to have an unselected blank value, set the placeholder prop to a blank string.

function Example() {
  // A controlled select Using a formatted array of options
  const options = [
    {
      label: 'Cookies',
      value: '1'
    },
    {
      label: 'Pizza',
      value: '2',
      /** Any additional items will be passed to the
         child ListItem as props */
      'aria-disabled': true,
      tabIndex: -1
    },
    {
      label: 'Icecream',
      value: '3'
    }
  ];

  return </select>;
}

<select label="Object map">

</select>

Manually Building the List

If you want full control over the child ListItems, you can manually build the list yourself.

<select label="Manual">
  <option value="Cookies">Cookies</option>
  <option value="Pizza">Pizza</option>
  <option value="Icecream">Icecream</option>
</select>

Option Groups

Both native and enhanced Selects can contain option groups. Just nest additional options arrays in your data.

<select label="Formatted">

</select>
  <optgroup label="Dinner">
    <option value="Pizza">Pizza</option>
  </optgroup>
  <optgroup label="Dessert">
    <option value="Cookies">Cookies</option>
    <option value="Icecream">Icecream</option>
  </optgroup>

Select

A Select Component

Props