Appending multiple icons to inputs in Vuetify.js

vue.js input append vuetify.js

12,875

Solution 1

You can use slots append or append-outer, you can add whatever you want in there.

v-text-field label="Answer (optional)">
  <template slot="append">
    <v-icon>clear</v-icon>
    <v-icon>search</v-icon>
  </template>
</v-text-field>

Codepen

Solution 2

Those who want to add single icon in textfield

just add append-icon attribute

<v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
></v-text-field>

Those who want to add multiple icons

Add template tag in textfield

<template slot="append">
    <v-icon>mdi-find</v-icon>
    <v-icon>mdi-key</v-icon>
   
  </template>

12,875

Author by

Chris

Web programmer from Arizona. I fell in love with a Spanish girl and now I live here in Barcelona. I've focused on PHP, but through my experience over the years I've developed a round set of skills in a broad range of web technologies. I enjoy my work in web development, but aside from that I love doing things like sports, hiking, reading, music, the occasional video game, and exploring Europe with my wife.

Updated on June 23, 2022

Comments

Chris almost 2 years

I know how to use the append-icon property to append an icon at the end of an input like this:

new Vue({
  el: '#app'
})

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

<div id="app">
  <v-text-field
            label="Answer (optional)"
            append-icon="fas fa-times"
            @click:append="$emit('remove-answer')"
    ></v-text-field>
</div>

But is there any way to append multiple icons or buttons like you can in Bootstrap?

I'd like to add a few icons with different actions, but I haven't been able to find a solution so far...

Chris over 5 years

Awesome! Exactly what I was looking for. Thanks for the quick answer!
Psidom over 5 years

Just curious. How do you find out that v-text-field has an append slot? When I look at the API here, it seems that it only has a label slot.
Traxo over 5 years

@Psidom I'm somewhat active in community so I know that many slots are not documented because devs are very busy ;)
Psidom over 5 years

Got you. That's what I am guessing too. Honored to see someone from the community to post here :-