# Datalist
Similar to the select
input, the type
to datalist
will provide you a list of suggestions that are filterable. Datalist is a native HTML feature, that has been incorporated into the form field
component.
In order to display the datalist options, make sure the datalist
property is true
on the <ks-form-field>
tag.
To create a list of available options, wrap the values in the <option>
tag and add them between the opening and closing <ks-form-field>
tag.
<ks-form-field
label="Email"
type="email"
datalist
>
<option>michael.scott@dundermifflin.com</option>
<option>dwight.schrutte@dundermifflin.com</option>
<option>pam.beasley@dundermifflin.com</option>
<option>jim.halpert@dundermifflin.com</option>
<option>Meredith.palmer@dundermifflin.com</option>
</ks-form-field>
WARNING
The HTML5 datalist
feature is supported by all modern browsers (opens new window), but is not consistently implemented. Make sure you test in different browsers to ensure you get the user experience you are looking for.
For a better autocomplete experience, check out the autocomplete component.
# Usage
For more information on how to use the form field
component and it's available configurations, check out the documentation.