<template>
  <div class="grid gap-8">
    <AisField label="Size:">
      <AisSelect :options="sizes" v-model="selectedSize" size="sm" />
    </AisField>

    <AisField id="" label="Example text area:">
    <AisTextarea
        placeholder="Select a size..."
        model-value="The quick brown fox jumps over the lazy dog."
        :size="selectedSize" cols="40"
    />
    </AisField>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AisTextarea from '@/components/textarea/AisTextarea.vue'
import AisField from '@/components/field/AisField.vue'
import AisSelect from '@/components/select/AisSelect.vue'

const sizes = ['sm', 'md', 'lg']
const selectedSize = ref('md')
const sampleText = ref('')
</script>
