Form

AutoComplete

Storybook

It is a useful component for creating a text input field that suggests auto-complete options to the user while typing.

Import

1import { AutoComplete } from 'dd360-ds'

1import AutoComplete from 'dd360-ds/AutoComplete'

Usage

It is mandatory to pass a prop called "items". The prop item, contains the data for each item in the drop-down list. If you want to disable an item, you can add a disabled property to the object. Each array object must have a format similar to of following example:

1import { AutoComplete } from 'dd360-ds'
2
3<AutoComplete items={[{ id: 1, name: 'Item name 1', disabled: true }, { id: 2, name: 'Item name 2' }]} />

Variants

Sets the appearance of the component. Available options are: default, active, disabled, warning, success, and error. Default uses: "default".

1import { AutoCompletex } from 'dd360-ds'
2
3<AutoComplete variant='default' items={[]} />
4<AutoComplete variant='active' items={[]} />
5<AutoComplete variant='warning' items={[]} />
6<AutoComplete variant='success' items={[]} />
7<AutoComplete variant='error' items={[]} />
8<AutoComplete variant='disabled' items={[]} />

Can find text

A message that is displayed when no items matching the user's search string are found.

1import { AutoComplete } from 'dd360-ds'
2
3<AutoComplete canFindText='No matches in your search' items={[]} />

IsCloseOnBlur

A boolean that indicates whether the drop-down list will be closed when the user clicks out of it. If the value is true and the property isSelect is true, the drop-down list will be open automatically if the user clicks on the input and the input text is empty.

1import { AutoComplete } from 'dd360-ds'
2
3<AutoComplete isCloseOnBlur={false} items={[]} />

IsLoading

A boolean indicating whether the drop-down list is loading.

1import { AutoComplete } from 'dd360-ds'
2
3<AutoComplete isLoading items={[]} />

LoadingText

A message displayed while loading the drop-down list.

1import { AutoComplete } from 'dd360-ds'
2
3<AutoComplete isLoading loadingText='Searching...' items={[]} />

Placeholder

Text that is displayed as a placeholder in the text box before something is typed.

1import { AutoComplete } from 'dd360-ds'
2
3<AutoComplete placeholder='Search items' items={[]} />

API Reference