Input (autocomplete)

Text input with autocomplete functionality

Demo

API

Tag

Name	Description
`<s-input-autocomplete>`	Custom Element, accepts content

Methods

Name	Description
`getValue()`	This method returns a Promise that resolves to the input-autocomplete's value

Attributes

Name	Value	Description
`inputid`	String	Must be unique per input-autocomplete. Used to generate an `id` for the `input` inside the `s-input-autocomplete` component. You must also provide a `for` attribute on the label associated with the `s-input-autocomplete`.
`disabled`	Boolean	Disables the native `<input>`.
`readonly`	Boolean	Makes the native `<input>` readonly.
`loading`	Boolean	Renders loading indicator in place of results - recommended for asynchronous operations expected to take 2+ seconds.
`aiassisted`	Boolean	Displays an AI-assisted icon in the select component to indicate AI-powered functionality.
`optionslist`	String	Stringified JSON array of option objects. See Guidelines below.

Classes

Name	Description
`success`	Applies success styling and shows `input-msg` - see input page for more information
`warning`	Applies warning styling and shows `input-msg` - see input page for more information
`error`	Applies error styling and shows `input-msg` - see input page for more information

Properties

Name	Value	Description
`inputId`	String	Must be unique per input-autocomplete. Used to generate an `id` for the `input` inside the `s-input-autocomplete` component. You must also provide a `for` attribute on the label associated with the `s-input-autocomplete`.
`disabled`	Boolean	Disables the native `<input>`.
`readonly`	Boolean	Makes the native `<input>` readonly.
`loading`	Boolean	Renders loading indicator in place of results - recommended for asynchronous operations expected to take 2+ seconds.
`aiAssisted`	Boolean	Displays an AI-assisted icon in the input-autocomplete component to indicate AI-powered functionality.
`optionsList`	Array	Array of option objects. See Guidelines below.

Events

Name	Detail	Description
`s-blur`	The `inputId` and `value` are available on `e.detail`.	Fired every time the value of the `<input>` associated with a `s-input-autocomplete` is changed.

Demo

API

Tag

Name
`<SInputAutocomplete>`

Methods

Name	Description
`getValue()`	This method returns a Promise that resolves to the input-autocomplete's value

Props

Name	Value	Description
`inputId`	String	Must be unique per input-autocomplete. Used to generate an `id` for the `input` inside the `SInputAutocomplete` component. You must also provide a `for` attribute on the label associated with the `SInputAutocomplete`.
`loading`	Boolean	Renders loading indicator in place of results - recommended for asynchronous operations expected to take 2+ seconds.
`aiAssisted`	Boolean	Displays an AI-assisted icon in the input-autocomplete component to indicate AI-powered functionality.
`disabled`	Boolean	Disables the component.
`readonly`	Boolean	Makes the native `<input>` readonly.
`optionsList`	Array	Array of option objects. See Guidelines above for information on the structure of these objects.
`onS-blur`	Function	Handles the `s-blur` event fired after the Input Autocomplete is blurred. The `inputId` and `value` are available on `e.detail`.

Classes

Name	Description
`success`	Applies success styling and shows `input-msg` - see input page for more information
`warning`	Applies warning styling and shows `input-msg` - see input page for more information
`error`	Applies error styling and shows `input-msg` - see input page for more information

React implementation notes

Using refs to access SInputAutocomplete value

In order to get the current value of the SInputAutocomplete, you must create a ref, assign it to the SInputAutocomplete, and then call getValue() on ref.current. The getValue method returns a promise which resolves to the input's value.

    
    const inputAutocompleteRef = React.createRef(); 
    
    function returnValue() {
      inputAutocompleteRef.current.getValue().then((value) => console.log(value));
    }
    
    return (
      <SInputAutocomplete ref={inputAutocompleteRef} />
    )

Skylab React links

General information about using our React package

Typescript

Exported types

// Object provided (in array) to optionsList prop export type OptionsData = { label: string; description?: string; }; // s-blur event's e.detail export type SBlurItem = { inputId: string; value: string };

Guidelines

Accessibility

Each s-input-autocomplete must have an associated label with for=<inputid> and a unique id. The id will be passed in to the aria-labelledby attribute on the s-input-autocomplete to ensure that screen readers present it properly.

Creating input-autocomplete sources

Set the optionsList property on s-input-autocomplete (or the optionsList prop on SInputAutocomplete) to an array of objects after the component is instantiated, or assign a stringified JSON array of option objects to the optionslist attribute. The objects in the array will have these properties:

An example of assigning the optionsList object to the s-input-autocomplete:

const danceSelect = document.querySelector("s-input-autocomplete[inputid='dance-input']"); danceSelect.optionsList = [{ label: "Salsa", }, { label: "Tango", }, { label: "Waltz", }];

Validation

Validation can be performed within the consuming app. If validation fails, add the error class to s-input-autocomplete and include input-msg as indicated in code sample above (see input page for further information on messaging). The consuming app is responsible for all validation messaging.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com