Similar to the
select input, the
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
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 label="Email" type="email" datalist > <option>email@example.com</option> <option>firstname.lastname@example.org</option> <option>email@example.com</option> <option>firstname.lastname@example.org</option> <option>Meredith.email@example.com</option> </ks-form-field>
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.
For more information on how to use the
form field component and it's available configurations, check out the documentation.