@inkline/inkline/components/IInput/examples/prepend-append-button.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>
        <i-button>Button</i-button>
    </template>
</i-input>

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

<i-input v-model="prependAppend" placeholder="Type something..">
    <template #prepend>
        <i-button>Button</i-button>
    </template>
    <template #append>
        <i-button>Button</i-button>
    </template>
</i-input>