<div class="form-group styles-{{- name }}">
    <label class="form-label" for="{{- name }}">{{- label }}</label>
    <input type="text" id="{{- name }}" class="form-control data-list" name="{{- name }}" value="{{- value }}" placeholder="{{- placeholder }}" list="{{- name }}-data-list">
    <datalist id="{{- name }}-data-list">
        <option value="initial">initial</option>
        <option value="left top">left top</option>
        <option value="left center">left center</option>
        <option value="left bottom">left bottom</option>
        <option value="right top">right top</option>
        <option value="right center">right center</option>
        <option value="right bottom">right bottom</option>
        <option value="center top">center top</option>
        <option value="center center">center center</option>
        <option value="center bottom">center bottom</option>
        <option value="0% 0%">0% 0%</option>
        <option value="5% 5%">5% 5%</option>
        <option value="10% 10%">10% 10%</option>
        <option value="15% 15%">15% 15%</option>
        <option value="20% 20%">20% 20%</option>
        <option value="25% 25%">25% 25%</option>
        <option value="50% 50%">50% 50%</option>
        <option value="75% 75%">75% 75%</option>
        <option value="100% 100%">100% 100%</option>
        <option value="0px 0px">0px 0px</option>
    </datalist>
</div>