Untitled

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


const props = defineProps(['label', 'err'])
var data = ref('')
</script>

<template>
<div :class="{ 'c--field': true, 'err': props.err } ">
    <label>{{ props.label }}</label>
    <input type="text" />
    <span v-if="props.err">{{ props.err }}</span>
</div>
</template>

<style>
.c--field { position: relative; }
.c--field.err > input { 
    border-color: #ff4040;
    outline: none;
}
.c--field > label {
    position: absolute;
    width: fit-content;
    top: -6px;
    background-color: #fff;
    margin: 0 0 0 13px;
    padding: 0 7px;
    font-size: 14px;
    line-height: 14px;
    font-weight: 700;
    color: #555;
}
.c--field:has(input:focus) > label { color: #240488; }
.c--field > input {
    color: #555;
    width: calc(100% - 24px);
    height: 32px;
    border: solid 3px #555;
    border-radius: 5px;
    padding: 0 10px;
}
.c--field:has(input:focus):not(.err) > input { border-color: #240488; }
.c--field > span {
    color: #ff4040;
    font-size: 14px;
    padding: 0 10px;
}
</style>