app/src/ui/components/TextField.vue

<template>
  <form-field>
    <label v-if="label" :class="{error: isError}">{{label}}</label>
    <input :value="modelValue" ref="field" @input="handleInput" :type="inputType" :class="{error: isError}" />
  </form-field>
</template>

<script>
import FormField from "./FormField.vue";
export default {
  props: {
    required: Boolean,
    label: String,
    modelValue: String,
    password: Boolean,
  },
  computed: {
    inputType() {
      return this.password ? "password" : "text";
    },
    isError() {
      return this.required && !this.modelValue
    }
  },
  components: {
    FormField
  },
  methods: {
    handleInput() {
      this.$emit("update:modelValue", this.$refs.field.value);
    },
  },
};
</script>

<style scoped>
input {
  transition: all 0.2s;
  color: #fff;
  background-color: transparent;
  font-weight: bold;
  outline: none;
  border: none;
  border-bottom: 1px solid #555;
  overflow: hidden;
  flex: 1;
  padding: 8px 15px;
}
input:focus {
  transition: all 0.2s;
  border-bottom: 1px solid #336699;
}
 input.error {
  border-bottom: 1px solid #900;
}
 input.error:focus {
  border-bottom: 1px solid #c00;
}
 label.error {
   color: #eee;
}
</style>