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 [email protected]

Link

Story Book Link Selectbox

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_select

Import component

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

Usage

<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

Sample Code

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. |