---
id:
  type: 'string'
name:
  type: 'string'
  default: ''
items:
  type: 'array'
class:
  type: 'string'
  default: 'form-control'
placeholder:
  type: 'string'
  default: ''
attributes:
  type: 'string'
  default: ''
required:
  type: 'bool'
  default: false
---
{%- assign datalist_id = id | append: '-datalist' -%}
{% capture pattern %}
  pattern="{{ items | map: 'value' | compact | default: items | join: '|' }}"
{% endcapture %}
{% assign attributes = attributes | append: ' ' | append: pattern %}

{%
  render 'forms/input.html',
  type: 'text',
  id:,
  class:,
  list: datalist_id,
  placeholder:,
  required:,
  attributes:
%}

<datalist
  id="{{- datalist_id | escape_once -}}"
>
  {% for option in items %}
    {% assign value = option | try: 'value' | default: option %}
    {% render 'forms/option.html', value: %}
  {% endfor %}
</datalist>