A component that defines a drop-down list of elements that could be selected.

### Default

```jsx live=true
() => {
  const [value, setValue] = React.useState("");

  return (
    <SelectInput
      value={value}
      placeholder="Select a Car"
      options={[
        { value: "c30", label: "Volvo C30" },
        { value: "c70", label: "Volvo C70" },
        { value: "c90", label: "Volvo C90" },
        { value: "c40", label: "Volvo S40", disabled: true },
        { value: "s60", label: "Volvo S60" },
        { value: "s80", label: "Volvo S80" },
        { value: "s90", label: "Volvo S90" }
      ]}
      onChange={e => {
        setValue(e.target.value);
      }}
    />
  );
};
```

### Loading

Rendering the select input in a loading state can be useful way to give feedback to the user that the component is loading new options.

```jsx live=true
() => {
  const [value, setValue] = React.useState("");

  return (
    <SelectInput
      value={value}
      placeholder="Select a Car"
      options={[
        { value: "c30", label: "Volvo C30" },
        { value: "c70", label: "Volvo C70" },
        { value: "c90", label: "Volvo C90" },
        { value: "c40", label: "Volvo S40", disabled: true },
        { value: "s60", label: "Volvo S60" },
        { value: "s80", label: "Volvo S80" },
        { value: "s90", label: "Volvo S90" }
      ]}
      onChange={e => {
        setValue(e.target.value);
      }}
      loading
    />
  );
};
```

### Changelog

- *Added in version 0.0.45*