Input with button

[websitevirtuoso]

Here a helper for some people who need ability to use multiple fields

<template>
  <template v-for="(_, idx) in fields" :key="idx">
    <Field v-slot="{ field, errors, value }" :name="`phone[${idx}]`">
      <v-text-field
        v-bind="field"
        type="text"
        :model-value="value"
        :prepend-inner-icon="mdiPhone"
        :label="t('messages.phone')"
        :error-messages="errors"
        :data-test="`user.phone[${idx}]`"
        class="[&>.v-input\_\_append]:ms-0"
        :class="{ 'group-input': idx > 0 || idx === fields.length - 1 }"
      >
        <template v-if="idx > 0 || idx === fields.length - 1" #append>
          <v-btn-group density="compact" class="!h-full border border-solid border-gray-400 [&>.v-btn]:min-w-[40px] [&>.v-btn]:p-0">
            <v-btn v-if="idx > 0" class="!rounded-none bg-red-100" @click="remove(idx)">
              <v-icon size="x-large" color="red" :icon="mdiMinusCircle" />
            </v-btn>
            <!-- Check if this is the last element -->
            <v-btn v-if="idx === fields.length - 1" class="bg-green-100" @click="push(undefined)">
              <v-icon size="x-large" color="green" :icon="mdiPlusCircle" />
            </v-btn>
          </v-btn-group>
        </template>
      </v-text-field>
    </Field>
    <!-- prettier-ignore -->
    <v-error-message :name='`phone["${idx}"]`' />
  </template>
</template>

<script setup lang="ts">
import VErrorMessage from '@/components/fields/VErrorMessage.vue'
import { Field, useFieldArray } from 'vee-validate'

const { t } = useI18n()
const { remove, push, fields } = useFieldArray('phone')
</script>

<style lang="scss">
.group-input {
  & .v-field {
    border-radius: 4px 0 0 4px;
  }
  & .v-btn-group {
    border-left: none;
    border-radius: 0 4px 4px 0;
  }
}
</style>

I am using tailwind so you can customize with pure css