• 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.

• onChange
  Fired when the selection changes on Select box
• onChange
  Function that returns an event with an updated "selectedIndex" property anytime the selection changes.

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>
    );
  }
}