2015-06-30 11:33:44 +03:00
# Dropdown
2015-11-01 00:37:26 +03:00
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.
<!-- example -->
```jsx
2015-11-10 13:07:43 +03:00
import Dropdown from 'react-toolbox/lib/dropdown';
2015-11-01 00:37:26 +03:00
const countries: [
{ value: 'EN-gb', label: 'England' },
{ value: 'ES-es', label: 'Spain'},
{ value: 'TH-th', label: 'Thailand' },
{ value: 'EN-en', label: 'USA'}
2015-06-30 11:33:44 +03:00
];
2015-11-12 02:12:33 +03:00
class DropdownTest extends React.Component {
state = {
value: 'ES-es',
};
handleChange = (value) => {
this.setState({value: value});
};
render () {
return (
< Dropdown
2015-11-22 23:41:28 +03:00
auto
2015-11-12 02:12:33 +03:00
onChange={this.handleChange}
source={countries}
value={this.state.value}
/>
);
}
}
2015-06-30 11:33:44 +03:00
```
## Properties
| Name | Type | Default | Description |
2015-11-01 00:37:26 +03:00
|:-----|:-----|:-----|:-----|
| `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.
2015-12-20 19:01:02 +03:00
| `error` | `String` | | Give an error string to display under the field.|
2015-11-01 00:37:26 +03:00
| `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.
2015-11-12 02:12:33 +03:00
| `source` | `Array` | | Array of data objects with the data to represent in the dropdown.
2015-11-01 00:37:26 +03:00
| `template` | `Function` | | Callback function that returns a JSX template to represent the element.
| `value` | `String` | | Default value using JSON data.