@inkline/inkline/components/IInput/examples/prepend-append-text.demo.html

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

<i-input v-model="prepend" placeholder="Type something..">
    <template #prepend>
        <span>https://</span>
    </template>
</i-input>

<i-input v-model="append" placeholder="Type something..">
    <template #append>
        <span>.com</span>
    </template>
</i-input>

<i-input v-model="prependAppend" placeholder="Type something..">
    <template #prepend>
        <span>https://</span>
    </template>
    <template #append>
        <span>.com</span>
    </template>
</i-input>