# DynamicSelect

This component is used to create a select box with pagination (infinite scrolling) & search/filter options. Support keyboard interactions

* Arrow Keys (up & down) - navigate through options list
* Enter Key - Select current highlighted option
* Escape Key - Exit select mode & discard changes

## Installation

```tsx
import { DynamicSelect } from 'uxp/components';
```

## Signature

```tsx
const DynamicSelect: React.FunctionComponent<IDynamicSelectProps>
```

## Examples

```tsx
<DynamicSelect
     selected={selected}
     options={(max: number, pageToken: string, args?: any) => getOptions(max, pageToken, args)}
     onChange={(value) => { setSelected(value)}}
     placeholder=" -- select --"
     labelField="label"
     timeout={500}
 />
```

## Properties

| Name             | Type                                                                                                              | Mandatory | Default Value | Example Value |
| ---------------- | ----------------------------------------------------------------------------------------------------------------- | --------- | ------------- | ------------- |
| options          | [IDynamicSelectDataFunction](https://help.iviva.com/uxp/v5/additional-resources/types/idynamicselectdatafunction) | Yes       | -             | -             |
| selected         | string                                                                                                            | Yes       | -             | -             |
| onChange         | (value: any) => void                                                                                              | Yes       | -             | -             |
| placeholder      | string                                                                                                            | No        | -             | -             |
| className        | string                                                                                                            | No        | -             | -             |
| isValid          | boolean                                                                                                           | No        | -             | -             |
| pageSize         | number                                                                                                            | No        | -             | -             |
| renderOption     | (item: any, key: number) => JSX.Element                                                                           | No        | -             | \*            |
| labelField       | string                                                                                                            | Yes       | -             | -             |
| iconField        | string                                                                                                            | No        | -             | -             |
| timeout          | number                                                                                                            | No        | -             | -             |
| type             | "search-box" \| "select-box"                                                                                      | No        | -             | -             |
| showEndOfContent | boolean                                                                                                           | No        | -             | -             |

## Related Types

* [IDynamicSelectProps](https://help.iviva.com/uxp/v5/additional-resources/types/idynamicselectprops)
* [IDynamicSelectDataFunction](https://help.iviva.com/uxp/v5/additional-resources/types/idynamicselectdatafunction)