---
name: AutoCompleteWeb
route: /Form/AutoCompleteWeb
menu: Form
---

import { Playground, PropsTable } from 'docz'
import { Alert } from 'react-native'
import { AutoCompleteWeb } from '../../../src'
import { colors } from '@barcard/functions'

## AutocompleteWeb

## About

AutoCompleteWeb input. Will not work in a native app :/. Currently allows us to
bring accessibility features (keyboard arrows) to our web app.

## Properties

<PropsTable of={AutoCompleteWeb} includeDescription={true} />

## Basic Usage

<Playground>
  <AutoCompleteWeb
    items={[
      // to do: not sure why we have / need name _and_ label. Should really only use label
      { name: 'Beer', label: 'Beer', value: 'id1' },
      { name: 'Cocktails', label: 'Cocktails', value: 'id2' },
      { name: 'Wine', label: 'Wine', value: 'id3' },
      { name: 'Well Drinks', label: 'Well Drinks', value: 'id4' },
    ]}
    handleSelect={item => alert(`Value Selected: ${item.label}`)}
    handleInput={text => console.log('Handled input:', text)}
    value={''}
    maxWidth={150}
    wrapperStyle={{ marginBottom: 50 }}
  />
</Playground>

## Example Data

```
items = [ { name: 'Beer', label: 'Beer', value: 'id1' }, ... ]
```
