Usage.md

Basic Usage

The typeahead behaves similarly to other form elements. It requires an array of data options to be filtered and displayed.

<Typeahead
  onChange={this._handleChange}
  options={myData}
/>

Single & Multi-Selection

The component provides single-selection by default, but also supports multi-selection. Simply set the multiple prop and the component turns into a tokenizer:

<Typeahead
  multiple
  onChange={this._handleChange}
  options={myData}
/>

Controlled vs. Uncontrolled

Like an input, the component can be controlled or uncontrolled. Use the selected prop to control it via the parent, or defaultSelected to optionally set defaults and then allow the component to control itself.

// Controlled
<Typeahead
  onChange={this._handleChange}
  options={myData}
  selected={selected}
/>

// Uncontrolled
<Typeahead
  defaultSelected={selected}
  onChange={this._handleChange}
  options={myData}
/>

Next: Data