<template>
  <div class="grid gap-4">
    <BaseTextarea
        v-model="sampleText"
        name="testarea"
        rows="10"
        placeholder="Base textarea"
        :disabled="disabled"
        :required="required"
        class="w-full block border border-ui-gray border-opacity-60 rounded shadow p-4"
    />

    <div class="flex gap-8">
      <label>
        <BaseCheckbox v-model="disabled" /> Disabled
      </label>
    </div>

    <div v-if="sampleText" class="border p-4 bg-ui-gray-50 rounded">
      {{sampleText}}
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import BaseTextarea from '@/components/textarea/BaseTextarea.vue'
  import BaseCheckbox from "@/components/checkbox/BaseCheckbox.vue";

  const sampleText = ref('')
  const disabled = ref(false)
  const required = ref(false)

</script>
