input.vue

<script setup>
import { ref } from 'vue';

const props = defineProps({
  type: {
    type: String,
    default: 'text',
    validator(value) {
      return ['text', 'email'].includes(value);
    },
  },
  placeholder: {
    type: String,
    default: 'Enter text',
  },
});

const uuid = ref(`${crypto.randomUUID()}`);
</script>

<template>
  <div>
    <label :for="uuid" class="block text-sm font-medium text-gray-700">
      <slot />
    </label>
    <div class="mt-1">
      <input
        :id="uuid"
        :type="type"
        :name="`input-${uuid}`"
        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
        :placeholder="placeholder"
      >
    </div>
  </div>
</template>