<script setup lang="ts">
defineProps<{
    id: string;
    label: string;
    type?: string;
    autocomplete?: string;
    modelValue: string;
    error?: string;
}>();
defineEmits<{ 'update:modelValue': [value: string] }>();
</script>

<template>
    <label class="field-label" :for="id">{{ label }}</label>
    <VTextField
        :id="id"
        :model-value="modelValue"
        @update:model-value="$emit('update:modelValue', $event)"
        :type="type ?? 'text'"
        variant="outlined"
        density="comfortable"
        :autocomplete="autocomplete"
        :error-messages="error"
        class="field"
    />
</template>
