react-toolbox/components/dropdown

Dropdown

The Dropdown selects an option between multiple selections. The element displays the current state and a down arrow. When it is clicked, it displays the list of available options.

import Dropdown from 'react-toolbox/lib/dropdown';

const countries: [
  { value: 'EN-gb', label: 'England' },
  { value: 'ES-es', label: 'Spain'},
  { value: 'TH-th', label: 'Thailand' },
  { value: 'EN-en', label: 'USA'}
];

class DropdownTest extends React.Component {
  state = {
    value: 'ES-es',
  };

  handleChange = (value) => {
    this.setState({value: value});
  };

  render () {
    return (
      <Dropdown
        auto={true}
        onChange={this.handleChange}
        source={countries}
        value={this.state.value}
      />
    );
  }
}

Properties

Name	Type	Default	Description
auto	Boolean	true	If true, the dropdown will open up or down depending on the position in the screen .
className	String	''	Set the class to give custom styles to the dropdown.
disabled	Boolean	false	Set the component as disabled.
label	String		The text string to use for the floating label element.
onChange	Function		Callback function that is fired when the component's value changes.
source	Array		Array of data objects with the data to represent in the dropdown.
template	Function		Callback function that returns a JSX template to represent the element.
value	String		Default value using JSON data.