{
  "name": "ds-autocomplete",
  "description": "Autocomplete input field with suggestions",
  "docUrl": "https://design.soracom.io/design-system/elements/autocomplete/",
  "category": "elements",
  "htmlElements": [
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "layout": {
      "support": "custom",
      "values": [
        "--inline",
        "--top",
        "--bottom",
        "--viewport"
      ]
    },
    "state": {
      "support": "subset",
      "values": [
        "--loading"
      ]
    }
  },
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-autocomplete\"><div class=\"ds-input\" role=\"combobox\" aria-expanded=\"false\" aria-controls=\"ac-list\" aria-autocomplete=\"list\"><input type=\"text\" placeholder=\"Search...\" autocomplete=\"off\"></div><button class=\"ds-button --plain --addon --icon-ui-arrow-down\"></button><ul class=\"__list\" id=\"ac-list\" role=\"listbox\"><li role=\"option\">Option 1</li><li role=\"option\">Option 2</li><li role=\"option\">Option 3</li></ul></div>"
    },
    {
      "name": "with-filter",
      "html": "<div class=\"ds-autocomplete\"><div class=\"ds-input\" role=\"combobox\" aria-expanded=\"true\" aria-controls=\"ac-filter-list\" aria-autocomplete=\"list\"><input type=\"text\" placeholder=\"Filter items...\" autocomplete=\"off\"></div><ul class=\"__list\" id=\"ac-filter-list\" role=\"listbox\"><li role=\"option\">Apple</li><li role=\"option\">Banana</li><li role=\"option\">Cherry</li></ul></div>"
    },
    {
      "name": "inline",
      "html": "<div class=\"ds-autocomplete --inline\"><div class=\"ds-input\" role=\"combobox\" aria-expanded=\"true\" aria-controls=\"ac-inline-list\" aria-autocomplete=\"list\"><input type=\"text\" placeholder=\"Search...\" autocomplete=\"off\"></div><ul class=\"__list\" id=\"ac-inline-list\" role=\"listbox\"><li role=\"option\">Option 1</li><li role=\"option\">Option 2</li></ul></div>"
    },
    {
      "name": "withLabel",
      "html": "<label class=\"ds-field\"><div class=\"ds-text --label\">Select Item</div><div class=\"ds-autocomplete\"><div class=\"ds-input\" role=\"combobox\" aria-expanded=\"false\" aria-controls=\"ac-field-list\" aria-autocomplete=\"list\"><input type=\"text\" placeholder=\"Search...\" autocomplete=\"off\"></div><ul class=\"__list\" id=\"ac-field-list\" role=\"listbox\"><li role=\"option\">Option 1</li><li role=\"option\">Option 2</li></ul></div></label>"
    }
  ]
}