@inkline/inkline/components/IInput/template.html

Inkline is the Vue.js UI/UX Library built for creating your next design system

<div class="input-wrapper" :class="classes">
    <div class="input-prepend" v-if="$slots.prepend">
        <slot name="prepend" />
    </div>
    <div class="input">
        <span class="input-prefix" v-if="$slots.prefix">
            <slot name="prefix" />
        </span>
        <input
            v-bind="$attrs"
            :value="value"
            ref="input"
            :name="name"
            :id="id"
            :type="type"
            :tabindex="tabIndex"
            :disabled="isDisabled"
            :aria-disabled="isDisabled ? 'true' : false"
            :readonly="isReadonly || plaintext"
            :aria-readonly="(isReadonly || plaintext) ? 'true' : false"
            @input="onInput"
            @blur="onBlur"
        >
        <span
            class="input-suffix"
            v-if="$slots.suffix || clearable && isClearable"
        >
            <slot name="clearable" :clear="onClear">
                <i
                    class="input-clear"
                    role="button"
                    :aria-label="clearAriaLabel"
                    :aria-hidden="isClearable ? 'false' : 'true'"
                    v-if="clearable"
                    v-show="isClearable"
                    @click="onClear"
                />
            </slot>
            <slot name="suffix" />
        </span>
    </div>
    <div class="input-append" v-if="$slots.append">
        <slot name="append" />
    </div>
</div>