```javascript
const options = ['One', 'Two', 'Three', 'Four', 'Five'];

const complexOptions = [
  {
    id: 'a',
    count: 8,
    name: 'Cats',
  },
  {
    id: 'b',
    count: 2,
    name: 'Dogs',
  },
  {
    id: 'c',
    count: 5,
    name: 'Birds',
  },
];

class Wrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: null };
  }

  render() {
    return (
      <div style={{ padding: '8px 0' }}>
        <Select
          {...this.props}
          value={this.state.value}
          onChange={newValue => this.setState({ value: newValue })}
        />
        <div>Raw Value: {JSON.stringify(this.state.value)}</div>
      </div>
    );
  }
}

<div>
  <div>A basic select:</div>
  <Wrapper options={options} />
  <div>An invalid select:</div>
  <Wrapper invalid options={options} />
  <div>A searchable select:</div>
  <Wrapper searchable options={options} />
  <div>A required select:</div>
  <Wrapper required options={options} />
  <div>A multi select:</div>
  <Wrapper multi options={options} />
  <div>A select with complex options:</div>
  <Wrapper
    options={complexOptions}
    getOptionValue={opt => opt.id}
    renderOption={opt => `${opt.name} (${opt.count})`}
  />
  <div>Loading state:</div>
  <Wrapper options={options} loading />
</div>;
```
