Skip to main content

MultiSelect

img

Usage​

This props inherits all the select and input properties from HTML

import React from 'react'
import { MultiSelect } from 'qdm-component-library'

function App() {
  const [multiselect, setmultiselect] = useState([])

  const hangdlemultiselect = (val_) => {
    console.log(val_)
    if (val_ && val_.length !== 0) {
      const index = multiselect.indexOf(val_)
      if (index === -1) {
        multiselect.push(val_)
        setmultiselect(multiselect)
      } else {
        multiselect.splice(index, 1)
        setmultiselect(multiselect)
      }
    } else {
      if (!val_) {
        setmultiselect([])
      }
    }
  }
  const [options, setoptions] = React.useState([
    { value: 'The Godfather', label: 1972 },
    { value: 'The Godfather: Part II', label: 1974 },
    { value: 'The Dark Knight', label: 2008 },
    { value: '12 Angry Men', label: 1957 },
    { value: "Schindler's List", label: 1993 },
    { value: 'Pulp Fiction', label: 1994 },
    { value: 'Fight Club', label: 1999 },
    { value: 'Forrest Gump', label: 1994 },
    { value: 'Inception', label: 2010 },
    { value: 'Star Wars: Episode IV - A New Hope', label: 1977 },
    { value: 'City of God', label: 2002 },
    { value: 'Se7en', label: 1995 },
    { value: 'Casablanca', label: 1942 },
    { value: 'City Lights', label: 1931 },
    { value: 'Psycho', label: 1960 },
    { value: 'The Green Mile', label: 1999 },
    { value: 'The Intouchables', label: 2011 },
    { value: 'Modern Times', label: 1936 },
    { value: 'Rear Window', label: 1954 },
    { value: 'The Pianist', label: 2002 },
    { value: 'The Departed', label: 2006 },
    { value: 'Whiplash', label: 2014 },
    { value: 'Gladiator', label: 2000 },
    { value: 'Memento', label: 2000 },
  ])

  const handleadd = (v) => {
    options.push({ value: v, label: v })
    setoptions(options)
  }

  const Ondelete = (val_) => {
    const index = multiselect.indexOf(val_)
    multiselect.splice(index, 1)
    setmultiselect(multiselect)
  }

  return (
    <MultiSelect
      options={options}
      data={multiselect}
      added={true}
      chipsType={'square'}
      variant="standard"
      label={'Multi select'}
      onChangeValue={(value) => hangdlemultiselect(value?.value)}
      onChangeClaer={(value) => hangdlemultiselect(value)}
      Ondelete={(value) => Ondelete(value)}
      OnAddNew={(value) => handleadd(value)}
    />
  )
}
export default App

Reference​

Props​

className​

props for providing classname to MultiSelect component string

id​

props for providing id to MultiSelect component string

name​

props for providing name to MultiSelect component string

children​

props for providing children for MultiSelect Component React Node

inLineStyles​

props give addition props to the MultiSelect Component type Object

size​

props for providing size for the MultiSelect Component any | 'small' | 'medium'

options​

props for providing options for MultiSelect Component Array of Objects

onChange​

props for changing value to input element for MultiSelect Component string

Ondelete​

props for deleting selected options in MultiSelect Component Function

onChangeClaer​

props for clear the value in input element Function

OnAddNew​

props for adding selected value in MultiSelect Component Function

disabled​

props for disable the MultiSelect Component boolean

helperTextStyle​

props for providing style for helperText object

helperTextType​

props for providing type for helperText any | "error" | "warning" | "success"

helperText​

props for providing helperText string

error​

props for providing boolean error,default it is false boolean

isloader​

props for providing loader indicator,default it is false boolean

labelWidth​

props for providing width to the label number

label​

props for providing label to the MultiSelect Component string

autoFocus​

props for providing autofocus to the input element in MultiSelect Component boolean

value​

props for providing value to the input element string

props for providing search icon when its true,default is false boolean

Icon​

props for providing icon to the input field in MultiSelect Component any

variant​

props for providing 3 types of variant to the MultiSelect Component 'outlined' | 'standard' | 'none',

chipsType​

props for providing type of the selected chips 'square' | 'circle'

isloaderIcon​

props for providing loader icon to the MultiSelect Component any