Skip to main content

Auto Suggestion Dropdown

img

Usage​

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

function App() {
  const suggestions = [
    { label: 'pen', value: 'pen' },
    { label: 'pencil', value: 'pencil' },
    { label: 'eraser', value: 'eraser' },
    { label: 'sharphner', value: 'sharphner' },
  ]
  return <AutoSuggestion options={suggestions} />
}
export default App

Reference​

variant​

Three types of variant 1.standard for only bottom bordered input 2.outlined for fully bordered input 3.none for border none 'standard'|'outlined'|'none

value​

props for providing value to the input field string

onChange​

props for changing value of the input field Function

placeHolder​

props for adding placeHolder string

options​

props for providing suggestion list Array of object

elevation​

props for box shadow for dropdown '0'|'1' |'2' |'3' |'4'

props for providing margin to the dropdown list number

props for providing padding to the dropdown list number

props for providing text size of the Dropdown list 'small'|'medium'|'large'

props for providing text color of the Dropdown list string

inLineStyles​

props for providing extra styling object