menu
Dark Mode
backgroundLayer 1
preact-material-components
Components and their props
  • Select
    • disabled true/false
      Makes the select box disabled.
    • basic true/false
      Makes the select box CSS only.
    • selectedIndex number
      The option to be set as selected.
    • hintText string
      Helpful text to display when no selection has been made. ("selectedIndex" must be -1 for the hintText to show)
    • onChange function
      Function that returns an event with an updated "selectedIndex" property anytime the selection changes.
  • Select.Item
    • disabled true/false
      Disables the option.
    • selected true/false
      Set the option as selected. Mostly the same as "selectedIndex", but it allows selection of multiple options.
Custom events
  • onChange
    Fired when the selection changes on Select box
Sample code
import {h, Component} from 'preact';
import Select from 'preact-material-components/Select';
import 'preact-material-components/List/style.css';
import 'preact-material-components/Menu/style.css';
import 'preact-material-components/Select/style.css';

export default class SelectPage extends Component {
  render(){
    return (
      <div>
        <Select hintText="Select an option"
          selectedIndex={this.state.chosenIndex}
          onChange={(e)=>{
            this.setState({
              chosenIndex: e.selectedIndex
            });
            //selected options
            console.log(e.selectedOptions);
          }}>
            <Select.Item>opt1</Select.Item>
            <Select.Item>opt2</Select.Item>
            <Select.Item>opt3</Select.Item>
            <Select.Item>opt4</Select.Item>
        </Select>
      </div>
    );
  }
}
Original documentation
This component encapsulates mdc-select, you can refer to its documentation here.
Demo
Normal
Select
  • Option 1
  • Option 2
  • Option 3
  • Option 4
Basic
Disabled
Select
  • Option 1
  • Option 2
  • Option 3
  • Option 4
Disabled option
Select
  • Option 1
  • Option 2
  • Option 3
  • Option 4
Note
If you are using this component individually, DO NOT FORGET to import 'preact-material-components/Menu/style.css' and 'preact-material-components/List/style.css'