Label with character counter

<script setup lang="ts">
import { ref } from "vue"
import { Field } from "@/components/ui/field"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

const length = ref(0)
</script>

<template>
  <Field class="w-full max-w-xs">
    <Label for="label-counter" class="justify-between">
      Bio
      <span class="text-muted-foreground">{{ length }}/200</span>
    </Label>
    <Textarea
      id="label-counter"
      placeholder="Tell us about yourself…"
      maxlength="200"
      @change="(e: Event) => (length = (e.target as HTMLTextAreaElement).value.length)"
    />
  </Field>
</template>