Skip to main content

Autocomplete Container

Displays a selection of relevant options based on current user input. An inline Loader can be displayed while the results are being returned from an api for the list display.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { AutocompleteContainer } from '@iag/chroma-react-ui.components';

Default​

The following example has a small set of example towns set in the values prop, type a or b to see the options displayed.

The onChange, onClear and onBlur are working by default to populate and clear the <Input />.

Loading State​

AutocompleteContainer can display a loading icon while data is being fetched.

Error​

Valid​

Disabled​

AutocompleteContainer can be displayed in a disabled state.

Properties​

Name
Description
  • className
    string
  • disabled
    boolean
  • error
    boolean
  • id
    string
  • label
    string
  • loading
    boolean
  • name*
    string
  • options*
    IOptions[]
  • onSelect*
    (e: IOptions) => void
  • onBlur
    () => void
  • onFocus
    () => void
  • placeholder
    string
  • valid
    boolean
  • value
    string
  • required
    boolean

CSS Variables​