# Autocomplete

A text input that suggests values as you type.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Autocomplete.tsx)

## Overview

An autocomplete is a text input with a suggestion list. Any typed string is a valid value.

Use it when suggestions only speed up entry. Use `Combobox` when the value must be one of the items.

## Examples

### Basic

```tsx
import { Autocomplete } from '@tempoxyz/ds'

const actions = ['Send payment', 'Send request', 'Swap tokens', 'View activity']

export function Demo() {
  return (
    <Autocomplete.Root items={actions}>
      <Autocomplete.InputGroup>
        <Autocomplete.Input aria-label="Search" placeholder="Search actions" />
        <Autocomplete.Clear />
      </Autocomplete.InputGroup>
      <Autocomplete.Popup>
        <Autocomplete.Empty>No matches</Autocomplete.Empty>
        <Autocomplete.List>
          {(action: string) => (
            <Autocomplete.Item key={action} value={action}>
              {action}
            </Autocomplete.Item>
          )}
        </Autocomplete.List>
      </Autocomplete.Popup>
    </Autocomplete.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Autocomplete/Basic.tsx)

### Size

Set `size` on `Autocomplete.InputGroup` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { Autocomplete, style } from '@tempoxyz/ds'

const actions = ['Send payment', 'Send request', 'Swap tokens', 'View activity']

export function Demo() {
  return (
    <div {...styles.column()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Autocomplete.Root items={actions} key={size}>
          <Autocomplete.InputGroup size={size}>
            <Autocomplete.Input aria-label={`Search ${size}`} placeholder="Search actions" />
            <Autocomplete.Clear />
          </Autocomplete.InputGroup>
          <Autocomplete.Popup>
            <Autocomplete.Empty>No matches</Autocomplete.Empty>
            <Autocomplete.List>
              {(action: string) => (
                <Autocomplete.Item key={action} value={action}>
                  {action}
                </Autocomplete.Item>
              )}
            </Autocomplete.List>
          </Autocomplete.Popup>
        </Autocomplete.Root>
      ))}
    </div>
  )
}

namespace styles {
  export const column = style({ display: 'grid', gap: '3', maxWidth: '24rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Autocomplete/Size.tsx)

## Guidelines

TODO: Write guidelines for Autocomplete.