Untitled

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


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

<template>
<div class="c--field">
    <label>{{ props.label }}</label>
    <input type="text" />
    <!-- <span>error message</span> -->
</div>
</template>

<style>
.c--field { 
    position: relative;
    padding: 0;
}
.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 > input {
    color: #555;
    width: calc(100% - 24px);
    height: 32px;
    border: solid 3px #555;
    border-radius: 5px;
    padding: 0 10px;
}
.c--field:has(input:focus) > label { color: #240488; }
.c--field:has(input:focus) > input { outline: none; border-color: #240488; }
</style>