Skip to main content

Autocomplete

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 { Autocomplete } from '@iag/chroma-react-ui.components';

Accessibility​

Accessibility Documentation(opens in new window)

Default​

There may be situations where the default <AutocompleteContainer /> is doing too much behind the scenes. The <Autocomplete /> is what is used internally inside the <AutocompleteContainer />

This stripped back component will require you to create your own onChange, onClear, onSelect & onBlur methods however this means you have more control over hooking up directly to your state variables and implement custom functionality such as debouncing api requests before displaying option values on screen.

Sizes​

Set form fields to a predefined width

Loading State​

Properties​

Name
Description
  • className
    stringAdditional CSS classes to be applied
  • disabled
    booleanDisables the Autocomplete component
  • error
    booleanIndicates if there's an error state
  • id
    stringHTML id attribute for the component
  • loading
    booleanIf set to true, display a loading spinner in the Input
  • label
    stringLabel for the Autocomplete component
  • name*
    stringName attribute for the input, useful for screen readers
  • onBlur
    () => voidCallback function triggered when the input loses focus
  • onBlurOption*
    () => voidCallback function triggered when an option loses focus
  • onFocus
    () => voidCallback function triggered when the input gains focus
  • onChange*
    (event: ChangeEvent<HTMLInputElement>) => voidCallback function triggered when the input value changes
  • onClear*
    (event: MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent) => voidCallback function triggered when the clear button is clicked or key event occurs
  • onSelect*
    (event: MouseEvent<HTMLButtonElement, MouseEvent>, listItem: IOptions, index: number) => voidCallback function triggered when an option is selected @param event - The mouse event associated with the selection @param listItem - The selected option object @param index - The index of the selected option in the options array
  • options*
    IOptions[]Options is an array of objects { label:string, value:string }
  • placeholder
    stringPlaceholder text for the input
  • valid
    booleanIf true, show a success color border on the Input
  • value
    stringThe current value of the input
  • required
    booleanIndicates if the input is required
  • autoComplete
    "on" | "off"Autocomplete attribute for the input
  • size
    SizeSize of the Autocomplete component (1, 2, 3, or 4)

CSS Variables​