<div class="form-group colorpicker-form-element colorpicker-input xibo-form-input {{customClass}}"
    {{#if default}}data-default="{{default}}"{{/if}}
    {{#if visibility}}data-visibility="{{visibility}}"{{/if}}
    {{#if dependsOn}}data-depends-on="{{dependsOn}}"{{/if}}
    {{#if isRequired}}data-is-required="{{isRequired}}"{{/if}}
    {{#if colorFormat}}data-color-format="{{colorFormat}}"{{/if}}
>
    {{#if title}}
        <label for="input_{{id}}" class="control-label"><strong>{{title}}</strong></label>
    {{/if}}
    <div class="input-info-container">
        {{#if helpText}}
            {{>add-ons/helpText helpText=helpText}}
        {{/if}}
    </div>
    <div class="input-group">
        <div class="input-group-prepend">
            <i class="input-group-text input-group-addon" id="{{id}}_label"></i>
        </div>
        <input type="text" class="form-control" id="input_{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" value="{{value}}"
            {{#each customData}}
                data-{{this.name}}="{{this.value}}"
            {{/each}}
        />
    </div>
    <div class="picker-container"><!-- Container for the picker dropdown --></div>
</div>