{% include parts/input-radios.html %}
{% include parts/input-radios-inline.html %}

{% include parts/input-checkboxes.html %}
{% include parts/input-checkboxes-inline.html %}

{% include parts/input-toggle.html %}
{% include parts/input-toggle-single.html %}

{% include parts/input-file.html %}


<div class="mb-3">
   <label class="form-label">Date of birth</label>
   <div class="row row-xs">
      <div class="col-5">
         <select name="user[month]" class="form-select">
            <option value="">Month</option>
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option selected="selected" value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
         </select>
      </div>
      <div class="col-3">
         <select name="user[day]" class="form-select">
            <option value="">Day</option>
            {% for i in (1..31) %}
            <option value="{{ i }}"{% if i == 20 %} selected{% endif %}>{{ i }}</option>{% endfor %}
         </select>
      </div>
      <div class="col-4">
         <select name="user[year]" class="form-select">
            <option value="">Year</option>
            {% for i in (1897..2014) reversed %}
            <option value="{{ i }}"{% if i == 1989 %} selected{% endif %}>{{ i }}</option>{% endfor %}
         </select>
      </div>
   </div>
</div>


<div class="mb-3">
   <label class="form-label">Text mask</label>
   {% include ui/form/input-mask.html mask="00/00/0000" placeholder="00/00/0000" visible=true %}
</div>
<div class="mb-3">
   <label class="form-label">Telephone mask</label>
   {% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
</div>

<div class="mb-3">
   <label class="form-label">Autosize textarea</label>
   {% include ui/form/textarea-autosize.html %}
</div>