Option select example

With filter

Adds a filter to allow users to narrow the checkboxes down. Checkboxes will only show if they match what the user has typed, or if they are already checked. The filter is case insensitive and strips out punctuation characters and duplicate whitespace, and sees ‘&’ and ‘and’ as the same, to make filtering easier.

How it looks (preview)

Countries

Countries

How to call this example

<%= render "govuk_publishing_components/components/option_select", {
  key: "filter_demo",
  title: "Countries",
  options_container_id: "list_of_countries_to_filter",
  show_filter: true,
  options: [
    {
      value: "afghanistan",
      label: "Afghanistan",
      id: "afghanistan"
    },
    {
      value: "albania",
      label: "Albania",
      id: "albania"
    },
    {
      value: "algeria",
      label: "Algeria",
      id: "algeria",
      checked: true
    },
    {
      value: "american_samoa",
      label: "American Samoa",
      id: "american_samoa"
    },
    {
      value: "andorra",
      label: "Andorra",
      id: "andorra",
      checked: true
    },
    {
      value: "angola",
      label: "Angola",
      id: "angola"
    },
    {
      value: "anguilla",
      label: "Anguilla",
      id: "anguilla"
    },
    {
      value: "antigua_and_barbuda",
      label: "Antigua and Barbuda",
      id: "antigua_and_barbuda"
    },
    {
      value: "argentina",
      label: "Argentina",
      id: "argentina"
    },
    {
      value: "armenia",
      label: "Armenia",
      id: "armenia"
    },
    {
      value: "aruba",
      label: "Aruba",
      id: "aruba"
    },
    {
      value: "australia",
      label: "Australia",
      id: "australia"
    },
    {
      value: "austria",
      label: "Austria",
      id: "austria"
    },
    {
      value: "azerbaijan",
      label: "Azerbaijan",
      id: "azerbaijan"
    },
    {
      value: "bahamas",
      label: "Bahamas",
      id: "bahamas"
    },
    {
      value: "bahrain",
      label: "Bahrain",
      id: "bahrain"
    },
    {
      value: "bangladesh",
      label: "Bangladesh",
      id: "bangladesh"
    },
    {
      value: "barbados",
      label: "Barbados",
      id: "barbados"
    },
    {
      value: "belarus",
      label: "Belarus",
      id: "belarus"
    },
    {
      value: "belgium",
      label: "Belgium",
      id: "belgium"
    },
    {
      value: "belize",
      label: "Belize",
      id: "belize"
    },
    {
      value: "benin",
      label: "Benin",
      id: "benin"
    },
    {
      value: "bermuda",
      label: "Bermuda",
      id: "bermuda"
    },
    {
      value: "bhutan",
      label: "Bhutan",
      id: "bhutan"
    },
    {
      value: "bolivia",
      label: "Bolivia",
      id: "bolivia"
    },
    {
      value: "cote",
      label: "Cote d’Ivoire",
      id: "cote"
    },
    {
      value: "sthelena",
      label: "St Helena, Ascension and Tristan da Cunha",
      id: "sthelena"
    },
    {
      value: "trinidad",
      label: sanitize("Trinidad & Tobago"),
      id: "trinidad"
    }
  ]
} %>