import { Meta } from '@storybook/addon-docs';

<Meta title="Components/SelectInput/Codesandbox" />

# SelectInput

Allows users to pick a value from a predefined list of options. Ideally, it should be used when there are 5 or more options, otherwise you should consider using a radio group instead.

_NOTE:_ This component is build on top of `react-select` and as such you can use any available prop from that component here as well. For a full list
of react-select props, [Click Here](https://react-select.com/props).

```js codesandbox=palmetto-components
import React, { useState } from 'react';
import { SelectInput } from '@palmetto/palmetto-components';

export default () => {
  const [value, setValue] = useState(null);

  const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
  ];

  return (
    <div style={{ height: '200px' }}>
      <SelectInput
        id="singleSelectWithLabel"
        label="Label"
        onChange={event => setValue(event.target.value)}
        options={options}
        value={value}
      />
    </div>
  );
};
```
