---
id: auto-complete
title: AutoComplete
---

# AutoComplete

Autocomplete is a feature in which an input field suggests a word based on user input. This allows users to quickly search
through, select from large collections of options and help services get more consistent data.

## How to use

<code src="@digigov/ui/src/form/AutoComplete/__stories__/Default.tsx" />

### With auto select

<code src="@digigov/ui/src/form/AutoComplete/__stories__/WithAutoSelect.tsx" />

### With default value

<code src="@digigov/ui/src/form/AutoComplete/__stories__/WithDefaultValue.tsx" />

### With placeholder

<code src="@digigov/ui/src/form/AutoComplete/__stories__/WithPlaceHolder.tsx" />

### With all option's values

<code src="@digigov/ui/src/form/AutoComplete/__stories__/WithShowAllValues.tsx" />

### With min length

This is the minimum number of characters that should be entered before the AutoComplete will attempt to suggest options(in above example is 2).

<code src="@digigov/ui/src/form/AutoComplete/__stories__/WithMinLength.tsx" />

## API

See below for a complete reference to all of the props available to the components mentioned here.

<ComponentProps
  componentName={[
    'AutoCompleteWrapper',
    'AutoCompleteStatus',
    'AutoCompleteStatusWrapper',
    'AutoCompleteInput',
    'AutoCompleteResultList',
    'AutoCompleteResultListItem',
    'AutoCompleteAssistiveHint',
  ]}
/>