npm package: @licuido-ui/ui_select-and-autocomplete
Description: The AutoComplete component is implemented as a custom input element of the InputBase. It extends the text field components sub-components, either the OutlinedInput, Input, or FilledInput, depending on the variant selected. It shares the same styles and ma
Latest version: 3.0.24

# AutoCompletebox

The AutoComplete component is implemented as a custom input element of the InputBase. It extends the text field components sub-components, either the OutlinedInput, Input, or FilledInput, depending on the variant selected. It shares the same styles and many of the same props

### Author

- @author Raman P <raman.g@crayond.co>

## Link

[Story Book Link SelectAndautocomplete](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_select-and-autocomplete
```

## Import component

```jsx
import { SelectAndautocomplete } from '@licuido-ui/ui_select-and-autocomplete';
```

## Usage

```jsx
 <SelectAndautocomplete
          options={valu}
            variant='filled'
            selectType='chip'
            multiple
            limitTags={1}
            onChange={(e: any, value: any) => {
              console.log('valuevaluevalue', e, value);

              setSate3(value);
            }}
            startAdornmentIcon={<TruckComponent />}
          />
```

## Image

![alt text](./selectWithAutocomplete.png)

## Sample Code

```jsx
 <SelectAndautocomplete
          options={valu}
            variant='filled'
            selectType='chip'
            multiple
            limitTags={1}
            onChange={(e: any, value: any) => {
              console.log('valuevaluevalue', e, value);

              setSate3(value);
            }}
            startAdornmentIcon={<TruckComponent />}
            value={state3}
            label={'Username'}
            required
            addOptionAction={() => console.log('hih')}
            onOpen={onOpen}
            ListboxProps={listboxProps}
          />
```

| **Prop**                 | **Type**              | **Default Value**                           | **Description**                                  |
| ------------------------ | --------------------- | ------------------------------------------- | ------------------------------------------------ | --- | --- |
| `selectType`             | String                | 'default'                                   | Type of select component.                        |
| `rootStyleSx`            | `Object`              | { background: '' }                          | Custom styling for the root element.             |
|                          |
| `limitTags`              | `Number`              | 3                                           | Maximum number of tags to display.               |
| `multiple`               | `Boolean`             | true                                        | Allow multiple selections (true/false).          |
| `value`                  | `Array`               | []                                          | Selected options.                                |
| `label`                  | `String`              | 'select'                                    | Label text.                                      |
| `onChange`               | `Function`            | handleSelectChange                          | Callback function for handling select changes.   |
| `options`                | `Array`               | See example                                 | An array of option objects with label and value. |     |     |
| `required`               | `Boolean`             | ''                                          | required of the Input.                           |
| `isError`                | `Boolean`             | true                                        | Showing error in input (true/false).             |
| `helperText`             | `String`              | ''                                          | Show of the input element.                       |
| `borderColor`            | `String`              | '1px solid blue'                            | Border style of the input element.               |
| `addNewStartIcon`        | `JSX Element`         | `<AddIconComponent />`                      | Add start icon of the input element.             |     |
| `startAdornmentIcon`     | `JSX Element`         | `<SearchIcon width={'18px'} color='red' />` | Start adornment for the input.                   |     |
| `endAdornmentIcon`       | `JSX Element`         | `<ArrowDown width={'18px'} color='red' />`  | End adornment for the input.                     |
| `optionSelectedIcon`     | `JSX Element`         | `<TickComponent  />`                        | Drop adornment for the input.                    |
| `chipStyle`              | `Object`              | '3px'                                       | style for chips.                                 |
| `optionStyle`            | `Object`              | ''                                          | style of the option.                             |
| `labelSx`                | `Object`              | ''                                          | style of the label.                              |
| `delecteChipColor`       | `String`              | ''                                          | delecteChip icon Color of chip.                  |
| `freeSolo`               | `Boolean`             | true                                        | Allow freeSolo selections (true/false).          |
| `optionSelectedIconShow` | `Boolean`             | true                                        | Allow optionSelectedIcon Show (true/false).      |
| `dividerStyle`           | `React.CSSProperties` | `{}`                                        | Custom styles for the "divider".                 |
| `addOptionBtnLabel`      | `String`              | ''                                          | addOptionBtnLabel of option chip.                |
| `addOptionAction`        | `Function`            | addOptionAction                             | Callback function for handling option add.       |
| `toolTipStyle`           | `Object`              | `{}`                                        | style of the label chip.                         |
| `toolTiPlacement`        | `String`              | ''                                          | Position of the tooltip.                         |
| `dividerEndAornmentShow` | `Boolean`             | true                                        | Allow input end divider selections (true/false). |
| `toolTipLabel`           | `String`              | ''                                          | Label of the tooltip.                            |
| `disabled`               | `Boolean`             | true                                        | Input not allow (true/false).                    |
| `addOptionBtnStyleProps` | `Object`              | {}                                          | Style for the Add New Options Button             |
| `labelStyleProps`        | `Object`              | {}                                          | Style for the Input Label                        |
| `opOpen`                 | `Function`            | {}                                          | calling function for opening dropdown            |     |
| `ListboxProps`           | `Object`              | {}                                          | ListboxProps                                     |     |
| `filterOptionsProps`     | `Function`            | {}                                          | calling function for filtering dropdown options  |
| `freeSoloAddText`        | `String`              | ''                                          | Text for the freesolo Add text                   |