menu
Dark Mode
backgroundLayer 1
preact-material-components
Components and their props
  • Select
    • disabled true/false
      Makes the select box disabled.
    • box true/false
      Makes the select with `box` appearence.
    • outlined true/false
      Makes the select with `outlined` appearence.
    • 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)
  • 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
  • onChange
    Function that returns an event with an updated "selectedIndex" property anytime the selection changes.
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.target.selectedIndex
            });
          }}>
            <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
Preselected
Select
Disabled
Select
Box option
Select
Outlined option
Select
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'