Input

                                                    
    <!-- Default -->
    <div class="form-control__helper"><span class="icon icon-information-circle-solid"></span>Additional Message (helper/error)</div>
    <!-- Success -->
    <div class="form-control__helper success"><span class="icon icon-check-circle-solid"></span>Additional Message (helper/error)</div>
    <!-- Warning -->
    <div class="form-control__helper warning"><span class="icon icon-exclaimation-circle-solid"></span>Additional Message (helper/error)</div>
    <!-- Error -->
    <div class="form-control__helper error"><span class="icon icon-x-circle-solid"></span>Additional Message (helper/error)</div>
                                                    
                                                

                                                    
    <!-- Default -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Text<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group">
            <input type="text" class="form-control__input" placeholder="A placeholder" />
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper"><span class="icon icon-information-circle-solid"></span>Additional Message (helper/error)</div>
    </div>
    <!-- Filled -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Text Filled<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group">
            <input type="text" class="form-control__input" placeholder="A placeholder" value="Input value here" />
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper"><span class="icon icon-information-circle-solid"></span>Additional Message (helper/error)</div>
    </div>
    <!-- Disabled -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Text Disabled<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group">
            <input type="text" class="form-control__input" placeholder="A placeholder" value="Disabled value here" disabled />
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper"><span class="icon icon-information-circle-solid"></span>Additional Message (helper/error)</div>
    </div>
    <!-- Read Only -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Text Readonly<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group">
            <input type="text" class="form-control__input" placeholder="A placeholder" value="Disabled value here" readonly />
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper"><span class="icon icon-information-circle-solid"></span>Additional Message (helper/error)</div>
    </div>
    <!-- Error -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Text Error<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group error">
            <input type="text" class="form-control__input" placeholder="A placeholder" value="Readonly value here" />
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper error"><span class="icon icon-x-circle-solid"></span>Additional Message (helper/error)</div>
    </div>
                                                    
                                                

                                                    
    <!-- Default -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Date<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group">
            <input type="date" class="form-control__input datepicker" placeholder="A placeholder" />
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper"><span class="icon icon-information-circle-solid"></span>Additional Message (helper/error)</div>
    </div>
    <!-- Disabled -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Date Disabled<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group">
            <input type="date" class="form-control__input datepicker" placeholder="A placeholder" disabled />
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper"><span class="icon icon-information-circle-solid"></span>Additional Message (helper/error)</div>
    </div>
    <!-- Readonly -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Date Readonly<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group">
            <input type="date" class="form-control__input datepicker" placeholder="A placeholder" readonly />
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper"><span class="icon icon-information-circle-solid"></span>Additional Message (helper/error)</div>
    </div>
    <!-- Error -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Date Error<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group error">
            <input type="date" class="form-control__input datepicker" placeholder="A placeholder" readonly />
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper error"><span class="icon icon-x-circle-solid"></span>Additional Message (helper/error)</div>
    </div> 
                                                    
                                                

                                                    
    <!-- Default -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Textarea<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group">
            <Textarea class="form-control__input" placeholder="A placeholder"></Textarea>
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper"><span class="icon icon-information-circle-solid"></span>Additional Message (helper/error)</div>
    </div>
    <!-- Filled -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Textarea Filled<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group">
            <Textarea class="form-control__input" placeholder="A placeholder">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at rutrum urna, quis condimentum lectus. Ut vitae neque vitae lorem elementum dapibus sed a neque. Etiam porttitor tempor finibus. Cras luctus bibendum tellus vel dignissim. Quisque hendrerit ultricies justo, et scelerisque dui dictum vitae. </Textarea>
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper"><span class="icon icon-information-circle-solid"></span>Additional Message (helper/error)</div>
    </div>
    <!-- Disabled -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Textarea Disabled<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group">
            <Textarea class="form-control__input" placeholder="A placeholder" disabled></Textarea>
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper"><span class="icon icon-information-circle-solid"></span>Additional Message (helper/error)</div>
    </div>
    <!-- Readonly -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Textarea Readonly<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group">
            <Textarea class="form-control__input" placeholder="A placeholder" readonly></Textarea>
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper"><span class="icon icon-information-circle-solid"></span>Additional Message (helper/error)</div>
    </div>
    <!-- Error -->
    <div class="form-control">
        <label for="" class="form-control__label">Input Textarea<span class="important">*</span><span class="icon icon-information-circle"></span></label>
        <div class="form-control__group error">
            <Textarea class="form-control__input" placeholder="A placeholder">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at rutrum urna, quis condimentum lectus. Ut vitae neque vitae lorem elementum dapibus sed a neque. Etiam porttitor tempor finibus. Cras luctus bibendum tellus vel dignissim. Quisque hendrerit ultricies justo, et scelerisque dui dictum vitae.</Textarea>
            <span data-clear="input"></span>
        </div>
        <div class="form-control__helper error"><span class="icon icon-x-circle-solid"></span>Additional Message (helper/error)</div>
    </div>