1 | # Basic Usage
|
2 | The typeahead behaves similarly to other form elements. It requires an array of data options to be filtered and displayed.
|
3 | ```jsx
|
4 | <Typeahead
|
5 | onChange={(selected) => {
|
6 | // Handle selections...
|
7 | }}
|
8 | options={[ /* Array of objects or strings */ ]}
|
9 | />
|
10 | ```
|
11 |
|
12 | ### Single & Multi-Selection
|
13 | The component provides single-selection by default, but also supports multi-selection. Simply set the `multiple` prop and the component turns into a tokenizer:
|
14 |
|
15 | ```jsx
|
16 | <Typeahead
|
17 | multiple
|
18 | onChange={(selected) => {
|
19 | // Handle selections...
|
20 | }}
|
21 | options={[...]}
|
22 | />
|
23 | ```
|
24 |
|
25 | ### Controlled vs. Uncontrolled
|
26 | Similar to other form elements, the typeahead can be [controlled](https://facebook.github.io/react/docs/forms.html#controlled-components) or [uncontrolled](https://facebook.github.io/react/docs/forms.html#uncontrolled-components). Use the `selected` prop to control it via the parent, or `defaultSelected` to optionally set defaults and then allow the component to control itself. Note that the *selections* can be controlled, not the input value.
|
27 |
|
28 | #### Controlled (Recommended)
|
29 | ```jsx
|
30 | <Typeahead
|
31 | onChange={(selected) => {
|
32 | this.setState({selected});
|
33 | }}
|
34 | options={[...]}
|
35 | selected={this.state.selected}
|
36 | />
|
37 | ```
|
38 |
|
39 | #### Uncontrolled
|
40 | ```jsx
|
41 | <Typeahead
|
42 | defaultSelected={[...]}
|
43 | onChange={(selected) => {
|
44 | // Handle selections...
|
45 | }}
|
46 | options={[...]}
|
47 | />
|
48 | ```
|
49 |
|
50 | [Next: Data](Data.md)
|