AutoComplete
Avatar
Badge
Button
Card
Carousel
Checkbox
CheckboxGroup
Chip
Drawer
Menu
Modal
MultiSelect
Navbar
Pagination
Popover
Preloader
ProgressBar
RadioButtonGroup
Select
Slider
Snackbar
Table
TextInput
Toggle
Tooltip
AutoComplete
lorem
ipsum
Props
Prop
Type
Default
Description
data
Array
An array of options for autocompletion. ( Required )
placeholder
String
undefined
Set a placeholder for the input component.
className
String
Set a class to style the Component
onChange
Function
An input change listener which returns the input value on any changes.
onKeyPress
Function
A keypress listener on the input field.
labelKey
String
label
A string representing the key for item's label.
valueKey
String
value
A string representing the key for item's value.
HTML Structure
HTML Structure

    <div class="autocomplete">
      <input class="autocomplete-input" type="text">
      <div id="autocomplete-list" class="autocomplete-list">
          <div aria-label="inactive" class="autocomplete-list-item">
            lorem
          </div>
          <div aria-label="inactive" class="autocomplete-list-item">
            ipsum
          </div>
      </div>
    </div>
  
Themes
Name
Description
autocomplete
Class used for the autocomplete element.
autocomplete-input
Class used for the text input element.
autocomplete-list
Class used for the autocomplete list.
autocomplete-list-item
Class used for the autocomplete list options.
border-animation
Class used for animating of input component when focused.