Typeahead:

```js
const employees = require('./mocks/employees').default;

initialState = {
	selectedItems: ['5c4af01fee495617bcc41a5e']
};

<Typeahead 
	label="Employees"
	selectedItems={state.selectedItems}
	options={employees}
	setSelected={selectedItems => setState({
		selectedItems
	})}/>
```

Typeahead full width:

```js
const employees = require('./mocks/employees').default;

initialState = {
	selectedItems: []
};

<Typeahead 
	label="Employees"
	fullWidth
	selectedItems={state.selectedItems}
	options={employees}
	setSelected={selectedItems => setState({
		selectedItems
	})}/>
```

Typeahead with multi select:

```js
const employees = require('./mocks/employees').default;

initialState = {
	selectedItems: []
};

<Typeahead 
	isMultiSelect
	label="Employees"
	selectedItems={state.selectedItems}
	options={employees}
	setSelected={selectedItems => setState({
		selectedItems
	})}/>
```

Typeahead allow new:

```js
let employees = require('./mocks/employees').default;

initialState = {
	selectedItems: [],
	employees
};

<Typeahead 
	label="Employees"
	selectedItems={state.selectedItems}
	options={state.employees}
	onAdd={text => {
		let id = Math.random();

		setState({
			employees: [{
				id,
				label: text
			}, ...state.employees],
			selectedItems: [id]
		});
	}}
	setSelected={selectedItems => setState({
		selectedItems
	})}/>
```

Typeahead multi allow new:

```js
let employees = require('./mocks/employees').default;

initialState = {
	selectedItems: [],
	employees
};

<Typeahead 
	label="Employees"
	isMultiSelect
	selectedItems={state.selectedItems}
	options={state.employees}
	onAdd={text => {
		let id = Math.random();

		setState({
			employees: [{
				id,
				label: text
			}, ...state.employees],
			selectedItems: [id, ...state.selectedItems]
		});
	}}
	setSelected={selectedItems => setState({
		selectedItems
	})}/>
```
Typeahead disabled:

```js
const employees = require('./mocks/employees').default;

initialState = {
	selectedItems: []
};

<Typeahead 
	label="Employees"
	fullWidth
	selectedItems={state.selectedItems}
	options={employees}
	disabled
	setSelected={selectedItems => setState({
		selectedItems
	})}/>
```

Typeahead Options with Icons

```
const AnchorIcon = require('../Icons/Anchor').default;
let employees = require('./mocks/employees').default;

initialState = {
	selectedItems: [],
	employees: employees.map(e => ({...e, Icon: AnchorIcon}))
};

<Typeahead 
	label="Employees"
	isMultiSelect
	selectedItems={state.selectedItems}
	options={state.employees}
	onAdd={text => {
		let id = Math.random();

		setState({
			employees: [{
				id,
				label: text
			}, ...state.employees],
			selectedItems: [id, ...state.selectedItems]
		});
	}}
	setSelected={selectedItems => setState({
		selectedItems
	})}/>
```

Typeahead with images

```
const Avatar = require('../Avatar').default;
let employees = require('./mocks/employees').default;

initialState = {
	selectedItems: [],
	employees: employees.map(e => ({...e, image: <Avatar employeeName={e.label} iconSize={60} fontSize={1.2} />}))
};

<Typeahead 
	label="Employees"
    fullWidth
    density="expanded"
	selectedItems={state.selectedItems}
	options={state.employees}
	onAdd={text => {
		let id = Math.random();

		setState({
			employees: [{
				id,
				label: text
			}, ...state.employees],
			selectedItems: [id, ...state.selectedItems]
		});
	}}
	setSelected={selectedItems => setState({
		selectedItems
	})}/>
```