name: Accessible autocomplete
description: An autocomplete component, built to be accessible.
body: |
  This component uses the [Accessible Autocomplete](https://github.com/alphagov/accessible-autocomplete) code to create an accessible autocomplete element. The autocomplete is created with the `showAllValues`
  option set to `true` and the `confirmOnBlur` option set to `false` (see [Autocomplete examples](https://alphagov.github.io/accessible-autocomplete/examples) here). It also depends upon the
  [label component](https://github.com/component-guide/label).

  If Javascript is disabled, the component appears as a select box, so the user can still select an option.
accessibility_criteria: |
  [Accessibility acceptance criteria](https://github.com/alphagov/accessible-autocomplete/blob/master/accessibility-criteria.md)
examples:
  default:
    data:
      label:
        text: 'Countries'
      options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us'], ['The Separate Customs Territory of Taiwan, Penghu, Kinmen, and Matsu (Chinese Taipei)', 'tw']]
  with_unique_identifier:
    data:
      id: 'unique-autocomplete'
      label:
        text: 'Countries'
      options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us']]
  with_selected_option_chosen:
    data:
      id: 'selected-option-chosen-autocomplete'
      label:
        text: 'Countries'
      options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us']]
      selected_option: ['United Kingdom', 'gb']
  with_tracking_enabled:
    description: |
     This example shows tracking enabled on an autocomplete. Tracking will be enabled automatically when `track_category` and `track_action` are specified in `data_attributes`.
    data:
      id: 'tracking-enabled-autocomplete'
      label:
        text: 'Countries'
      options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us']]
      data_attributes:
        track_category: 'chosen_category'
        track_action: 'chosen_action'
        track_option:
          custom_dimension: 'your_custom_dimension'
  with_multiple_selections:
    description: This parameter allows the user to choose more than one option from the autocomplete. The component generates a select multiple in place of a regular select, and the autocomplete Javascript detects this and provides the multiple selection functionality.
    data:
      multiple: true
      label:
        text: 'Countries'
      options: [['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us'], ['The Separate Customs Territory of Taiwan, Penghu, Kinmen, and Matsu (Chinese Taipei)', 'tw']]