{% if type == blank %}
  {% assign type = 'text' %}
{% endif %}
{% if autocomplete == blank %}
  {% assign autocomplete = 'off' %}
{% endif %}
{% if autocapitalize == blank %}
  {% assign autocapitalize = 'off' %}
{% endif %}
{% if spellcheck == blank %}
  {% assign spellcheck = 'false' %}
{% endif %}
{% if required == blank %}
  {% assign required = 'false' %}
{% endif %}

{%- capture id -%}
{{type}}{{name}}{{ className | replace: ' ', '' }}
{%- endcapture -%}

{%- capture cx -%}
  input-wrapper x
  {{ className }}
{%- endcapture -%}

<div class='{{ cx }} slater-input' data-component='input-text'>
  <input
    id='{{ id }}'
    class='sans p x'
    type='{{ type }}'
    name='{{ name }}'
    placeholder='{{ placeholder }}'
    value='{{ value }}'
    autocomplete='{{ autocomplete }}'
    autocapitalize='{{ autocapitalize }}'
    spellcheck='{{ spellcheck }}'
    required='{{ required }}'
  />
  <label for='{{ id }}' class='sans caps small track medium hide'>{{ label }}</label>
  <span></span>
</div>