accessible-autocomplete

Accessible Autocomplete

This macro takes a <select> and uses progressive enhancement, provided by the govuk accessible-autocomplete enhanceSelectElement function. It also supports a <label> with hint and error message support for the <select>

The enhanceSelectElement will transform the <select> into an <input> with full accessibility support.

See here for more information on the underlying accessible autocomplete component.

Data attributes for the select element

data-module

Should always be set to value hmrc-accessible-autocomplete for this component to find the select and apply the enhanceSelectElement function to it.

data-default-value

Type: String

Specify a value with which to prefill the autocomplete input.

data-auto-select

Type: Boolean

Set to true to highlight the first option when the user types in something and receives results. Pressing enter will select it.

data-show-all-values

Type: Boolean

Set to true to show all values when the user clicks the input. This is similar to a default dropdown, so the autocomplete is rendered with a dropdown arrow to convey this behaviour.

data-min-length

Type: Int

The number of characters the user must enter before any matches are shown. Defaults to zero.

data-language

Type: String

By default, English content for various states (eg. "No search results") is provided by the underlying accessible-autocomplete component. By setting this attribute to cy, the component will use the corresponding Welsh content.

Example select input

<select id="location-picker" data-show-all-values="false" data-auto-select="false" data-default-value="" data-module="hmrc-accessible-autocomplete">
  <option value="fr">France</option>
  <option value="de">Germany</option>
  <option value="gb">United Kingdom</option>
</select>

License

This code is open source software licensed under the Apache 2.0 License.