Kickstand UI

# Autocomplete

This component shows suggestions that match what the user types as they type. They can select a suggestion to complete their entry quickly and accurately or keep typing to further refine the suggested options.

<ks-form-field label="Employee" type="autocomplete">
    <option>Michael Scott</option>
    <option>Dwight Schrute</option>
    <option>Pam Beesly</option>
    <option>Jim Halpert</option>
    <option>Angela Martin</option>
    <option>Ryan Howard</option>
</ks-form-field>

# Value

The value returned from the example above will be the text within the <option> tag. You can specify an alternate value using the value attribute.

<ks-form-field label="Employee" type="autocomplete">
    <option value="ms">Michael Scott</option>
    <option value="ds">Dwight Schrute</option>
    <option value="pb">Pam Beesly</option>
    <option value="jh">Jim Halpert</option>
    <option value="am">Angela Martin</option>
    <option value="rh">Ryan Howard</option>
</ks-form-field>

You can also specify alternate search terms by using the search attribute. When using multiple search terms, use a delimiter like | to prevent unintended results.

<ks-form-field label="Employee" type="autocomplete">
    <option search="Michael Scarn|Michael Klump">Michael Scott</option>
    <option search="Dwigt|Recyclops">Dwight Schrute</option>
    <option search="Pamalamadingdong|Pamcaso">Pam Beesly</option>
    <option search="Big Tuna">Jim Halpert</option>
    <option search="Monkey|Booster Seat">Angela Martin</option>
    <option search="Temp|Fire Guy">Ryan Howard</option>
</ks-form-field>

# Auto-Expand

You can configure the options list to expand when the user focuses on the input field using the auto-expand property.

<ks-form-field label="Employee" type="autocomplete" auto-expand>
    ...
</ks-form-field>

# Usage

For more information on how to use the form field component and it's available configurations, check out the documentation.

← Checkbox →