npm package: @licuido-ui/ui_select
Description: The Select 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 
Latest version: 2.0.1

# Selectbox

The Select 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 G Balaji <balaji.g@crayond.co>

## Link

[Story Book Link Selectbox](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
```

## Import component

```jsx
import { Select } from '@licuido-ui/ui_select';
```

## Usage

```jsx
<Select
  componentStylePropSx={{}}
  selectType='default'
  customProps={{
    rootStyleSx: {
      background: '',
    },
    inputRootStyleSx: {
      '& div': {
        background: '',
        color: '',
      },
    },
    selectParentSx: {},
    limitTags: 3,
    multiple: true,
    value: selectedOptions,
    isClearIcon: true,
    onClearTag: () => {
      setSelectedOptions([]);
    },
    islabel: true,
    label: 'select',
    handleChange: handleSelectChange,
    options: [
      { label: 'Option 1', value: 1994 },
      { label: 'Option 2', value: 1972 },
      { label: 'Option 3', value: 1974 },
      { label: 'Option 4', value: 2008 },
      { label: 'Option 5', value: 1957 },
      { label: 'Option 6', value: 1993 },
      { label: 'Option 7', value: 1994 },
    ],
    selectId: 'select',
    dropdownMinHeight: '200px',
    dropdownMaxWidth: '',
    dropdownMinWidth: '',
    dropdownMaxHeight: '',
    inputMinHeight: '',
    inputMaxWidth: '',
    inputMinWidth: '',
    inputMaxHeight: '',
    inputBackgroundColor: 'red',
    inputBorder: '1px solid blue',
    inputBorderRadius: '8px',
    inputPropsSx: {},
    inputStartEndornment: <SearchIcon width={'18px'} color='red' />,
    labelPropsSx: {},
    inputEndEndornment: <ArrowDown width={'18px'} color='red' />,
    checkedIconProp: null,
    unCheckedIconProp: null,
    hoverBgColor: '',
    hoverColor: 'blue',
    background: '',
    borderRadiusChip: '3px',
    inputColor: 'black',
    groupHeadColor: 'grey',
    listItemfontSize: '',
  }}
/>
```

## Image

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

## Sample Code

```jsx
import {  Select } from '@licuido-ui/react';
import { useState } from 'react';
import ArrowDown from './assets/arrowDown';
import SearchIcon from './assets/searchIcon';
import GlobeSvg from './assets/globleSvg';

function App() {

   // Selected options state
  const [selectedOptions, setSelectedOptions] = useState<any[]>([]);

  function removeDuplicates(arr: any[]): any[] {
    const objectCounts = new Map();
    arr.forEach((item) => {
      const serializedItem = JSON.stringify(item);
      const count = objectCounts.get(serializedItem) || 0;
      objectCounts.set(serializedItem, count + 1);
    });

    return arr.filter((item) => {
      const serializedItem = JSON.stringify(item);
      const count = objectCounts.get(serializedItem);
      return count === 1;
    });
  }

  // Update the selected options when the user makes a selection
  const handleSelectChange = (event: any, newValue: any) => {
    const deduplicatedArray = removeDuplicates(newValue);
    console.log(deduplicatedArray, 'kkkkkkkk');
    setSelectedOptions(deduplicatedArray);
  };

  return (
    <ThemeProvider theme={muiTheme}>
      <Select
        componentStylePropSx={{}}
        selectType='chip'
        customProps={{
          rootStyleSx: {
            background: '',
          },
          inputRootStyleSx: {
            '& div': {
              background: '',
              color: '',
            },
          },
          selectParentSx: {},
          limitTags: 3,
          multiple: true,
          value: selectedOptions,
          isClearIcon: true,
          onClearTag: () => {
            setSelectedOptions([]);
          },
          islabel: true,
          label: 'select',
          handleChange: handleSelectChange,
          options: [
            { label: 'Option 1', value: 1994 },
            { label: 'Option 2', value: 1972 },
            { label: 'Option 3', value: 1974 },
            { label: 'Option 4', value: 2008 },
            { label: 'Option 5', value: 1957 },
            { label: 'Option 6', value: 1993 },
            { label: 'Option 7', value: 1994 },
          ],,
          selectId: 'select',
          dropdownMinHeight: '200px',
          dropdownMaxWidth: '',
          dropdownMinWidth: '',
          dropdownMaxHeight: '',
          inputMinHeight: '',
          inputMaxWidth: '',
          inputMinWidth: '',
          inputMaxHeight: '',
          inputBackgroundColor: 'red',
          inputBorder: '1px solid blue',
          inputBorderRadius: '8px',
          inputPropsSx: {},
          inputStartEndornment: <SearchIcon width={'18px'} color='red' />,
          labelPropsSx: {},
          inputEndEndornment: <ArrowDown width={'18px'} color='red' />,
          checkedIconProp: null,
          unCheckedIconProp: null,
          hoverBgColor: '',
          hoverColor: 'blue',
          background: '',
          borderRadiusChip: '3px',
          inputColor: 'black',
          groupHeadColor: 'grey',
          listItemfontSize: '',
        }}
      />
  );
}
export default App;

```

### Props

| **Prop**               | **Type** | **Default Value** | **Description**                                   |
| ---------------------- | -------- | ----------------- | ------------------------------------------------- |
| `componentStylePropSx` | Object   | {}                | Custom styling for the component.                 |
| `selectType`           | String   | 'default'         | Type of select component.                         |
| `customProps`          | Object   | {}                | customProps containing various custom properties: |

**customProps** contain these props ,

| **Prop**               | **Type**      | **Default Value**                           | **Description**                                                       |
| ---------------------- | ------------- | ------------------------------------------- | --------------------------------------------------------------------- |
| `rootStyleSx`          | `Object`      | { background: '' }                          | Custom styling for the root element.                                  |
| `inputRootStyleSx`     | `Object`      | { '& div': { background: '', color: '' } }  | Custom styling for the input root element, including nested elements. |
| `selectParentSx`       | `Object`      | {}                                          | Custom styling for the select parent element.                         |
| `limitTags`            | `Number`      | 3                                           | Maximum number of tags to display.                                    |
| `multiple`             | `Boolean`     | true                                        | Allow multiple selections (true/false).                               |
| `value`                | `Array`       | []                                          | Selected options.                                                     |
| `isClearIcon`          | `Boolean`     | true                                        | Show clear icon for tags (true/false).                                |
| `onClearTag`           | `Function`    | () => { setSelectedOptions([]); }           | Callback function when clearing a tag.                                |
| `islabel`              | `Boolean`     | true                                        | Show label (true/false).                                              |
| `label`                | `String`      | 'select'                                    | Label text.                                                           |
| `handleChange`         | `Function`    | handleSelectChange                          | Callback function for handling select changes.                        |
| `options`              | `Array`       | See example                                 | An array of option objects with label and value.                      |
| `selectId`             | `String`      | 'select'                                    | ID for the select element.                                            |
| `dropdownMinHeight`    | `String`      | '200px'                                     | Minimum height of the dropdown.                                       |
| `dropdownMaxWidth`     | `String`      | ''                                          | Maximum width of the dropdown.                                        |
| `dropdownMinWidth`     | `String`      | ''                                          | Minimum width of the dropdown.                                        |
| `dropdownMaxHeight`    | `String`      | ''                                          | Maximum height of the dropdown.                                       |
| `inputMinHeight`       | `String`      | ''                                          | Minimum height of the input element.                                  |
| `inputMaxWidth`        | `String`      | ''                                          | Maximum width of the input element.                                   |
| `inputMinWidth`        | `String`      | ''                                          | Minimum width of the input element.                                   |
| `inputMaxHeight`       | `String`      | ''                                          | Maximum height of the input element.                                  |
| `inputBackgroundColor` | `String`      | 'red'                                       | Background color of the input element.                                |
| `inputBorder`          | `String`      | '1px solid blue'                            | Border style of the input element.                                    |
| `inputBorderRadius`    | `String`      | '8px'                                       | Border radius of the input element.                                   |
| `inputPropsSx`         | `Object`      | {}                                          | Custom styling for input props.                                       |
| `inputStartEndornment` | `JSX Element` | `<SearchIcon width={'18px'} color='red' />` | Start adornment for the input.                                        |
| `labelPropsSx`         | `Object`      | {}                                          | Custom styling for label props.                                       |
| `inputEndEndornment`   | `JSX Element` | `<ArrowDown width={'18px'} color='red' />`  | End adornment for the input.                                          |
| `checkedIconProp`      | `Any`         | `null`                                      | Custom icon for checked state.                                        |
| `unCheckedIconProp`    | `Any`         | `null`                                      | Custom icon for unchecked state.                                      |
| `hoverBgColor`         | `String`      | ''                                          | Background color on hover.                                            |
| `hoverColor`           | `String`      | 'blue'                                      | Text color on hover.                                                  |
| `background`           | `String`      | ''                                          | Background styling.                                                   |
| `borderRadiusChip`     | `String`      | '3px'                                       | Border radius for chips.                                              |
| `inputColor`           | `String`      | 'black'                                     | Text color of the input.                                              |
| `groupHeadColor`       | `String`      | 'grey'                                      | Color of group headers.                                               |
| `listItemfontSize`     | `String`      | ''                                          | Font size of list items.                                              |