<template>
  <div class="textbox-playground">
    <form class="row">
      <div class="col col-12">
        <v-text-input v-model="text" label="Text Input" />
      </div>
      <div class="col col-12 mt-2">
        <v-text-input v-model="text" label="Required" required />
      </div>
      <div class="col col-12 mt-2">
        <v-text-input v-model="text" label="Floating Label" floating-label />
      </div>
      <div class="col col-12 mt-2">
        <v-text-area label="Text area:" v-model="text2" />
      </div>
      <div class="col col-12 mt-2">
        <v-text-area label="Text area:" v-model="text2" floating-label />
      </div>
      <div class="col col-3 mt-2">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VTextArea, VTextInput } from '@/components';

const text = ref('');
const text2 = ref('');
</script>
