React Lite UI

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


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