Field with input and textarea

<script setup lang="ts">
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <FieldGroup>
      <Field>
        <FieldLabel for="ticket-subject">Subject</FieldLabel>
        <Input id="ticket-subject" placeholder="Briefly describe the issue" />
        <FieldDescription>
          Use a clear and descriptive subject line.
        </FieldDescription>
      </Field>
      <Field>
        <div class="flex items-center justify-between">
          <FieldLabel for="ticket-message">Message</FieldLabel>
          <span class="text-muted-foreground text-xs">0/500</span>
        </div>
        <Textarea
          id="ticket-message"
          placeholder="Tell us more about your problem…"
          class="min-h-[120px]"
        />
        <FieldDescription>
          Include any relevant details to help us resolve your issue.
        </FieldDescription>
      </Field>
    </FieldGroup>
  </div>
</template>