Form
AutoComplete
Storybook
AutoComplete
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. Each array object must have a format similar to of following example:
1import { Checkbox } from 'dd360-ds'
2
3<AutoComplete items={[{name: 'Item name', id: '1'}]} />Variants
Sets the appearance of the component. Available options are: default, active, disabled, warning, success, and error. Default uses: "default".
1import { Checkbox } 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={[]} />Types
Sets the input type of the component. Available options are: text, number, email, currency, date, date, password, year, month, and percentage. By default it uses "text".
1import { Checkbox } from 'dd360-ds'
2
3<AutoComplete type='text' items={[]} />
4<AutoComplete type='currency' items={[]} />
5<AutoComplete type='password' items={[]} />
6<AutoComplete type='percentage' items={[]} />Can find text
A message that is displayed when no items matching the user's search string are found.
1import { Checkbox } 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.
1import { Checkbox } from 'dd360-ds'
2
3<AutoComplete isCloseOnBlur={false} items={[]} />IsLoading
A boolean indicating whether the drop-down list is loading.
1import { Checkbox } from 'dd360-ds'
2
3<AutoComplete isLoading items={[]} />LoadingText
A message displayed while loading the drop-down list.
1import { Checkbox } 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 { Checkbox } from 'dd360-ds'
2
3<AutoComplete placeholder='Search items' items={[]} />API Reference
| Name | Types | Default |
|---|---|---|
| "items"* | [{name: string, id: string | number}] | - |
| "variant" | active disabled warning success error default | default |
| "canFindText" | string | no matches |
| "type" | number text email currency date password year month percentage file | text |
| "onSelectItem" | ((item: Partial<Item>) => void) | - |
| "removeSelectedItem" | ((item: Partial<Item>) => void) | - |
| "onChange" | ((event: ChangeEvent<HTMLInputElement>) => void) | - |
| "isCloseOnBlur" | boolean | true |
| "disabled" | boolean | false |
| "isLoading" | boolean | false |
| "large" | boolean | false |
| "loadingText" | string | Loading... |
| "value" | string | false |
| "label" | string | false |
| "placeholder" | string | false |
| "startAdornment" | ReactNode | - |
| "endAdornment" | ReactNode | - |
| "classNameAdornment" | string | - |
| "language" | es en | es |
| "padding" | string | - |
| "paddingX" | string | - |
| "paddingY" | string | - |
| "role" | string | - |
| "boxShadow" | string | - |
| "rounded" | string | - |
| "className" | string | - |